Skip to content

feat(www): move docs search field to the drawer bottom on mobile #702

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mehdibha wants to merge 1 commit into
base: main
Choose a base branch
from
+17 −9
Open

feat(www): move docs search field to the drawer bottom on mobile #702

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions www/src/components/search-command.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,11 +98,9 @@ export function SearchCommand({
</DialogContent>
)
return isMobile ? (
// Match the desktop modal's raised surface. Near-full-height sheet
// (mirrors base-ui.com's mobile search): the input sits at the top,
// structurally clear of the iOS keyboard, and the results list
// flexes below it. The drawer's keyboard inset keeps the list's
// bottom above the keyboard.
// Match the desktop modal's raised surface. Near-full-height sheet:
// the results list flexes above the input, which sits at the
// bottom — the drawer's keyboard inset keeps it above the keyboard.
<Drawer className="h-[calc(100dvh_-_3rem_+_var(--drawer-bleed))] bg-(--neutral-100)">
<DrawerHandle />
{content}
Expand Down
18 changes: 14 additions & 4 deletions www/src/components/search-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,11 +183,21 @@ export default function SearchDialog({
data-command=""
className={commandStyles({
// On mobile the dialog fills a near-full-height drawer, so the
// command column flexes instead of sizing to its content.
className: "gap-0 overflow-y-hidden p-0 max-md:min-h-0 max-md:grow",
// command column flexes instead of sizing to its content, and the
// field's shell inset moves to its bottom edge (same specificity as
// the command's own **: rules, which outrank plain classes).
className:
"gap-0 overflow-y-hidden p-0 max-md:min-h-0 max-md:grow max-md:**:data-search-field:pt-0 max-md:**:data-search-field:pb-1.5",
})}
>
<SearchField autoFocus aria-label="Search" className="px-1.5 pt-1.5">
{/* On mobile the field sits at the bottom of the drawer, thumb-reach
and directly above the keyboard (the drawer's keyboard inset pads
the popup bottom). */}
<SearchField
autoFocus
aria-label="Search"
className="px-1.5 pt-1.5 max-md:order-last"
>
{/* Radius stays concentric with the modal (2xl − 6px inset); the
filled input needs no focus treatment, so the ring is off and the
border stays the neutral field color on focus. */}
Expand All @@ -206,7 +216,7 @@ export default function SearchDialog({
it rather than on the wrapper. */}
<MenuContent
aria-label="Search results"
className="max-h-80 overflow-y-auto p-1.5 pt-3 max-md:max-h-none max-md:min-h-0 max-md:grow"
className="max-h-80 overflow-y-auto p-1.5 pt-3 max-md:max-h-none max-md:min-h-0 max-md:grow max-md:pt-1.5 max-md:pb-3"
onAction={onClose}
renderEmptyState={() => (
<div className="py-8 text-center text-sm text-fg-muted">
Expand Down
Loading