fix(ux): mobile polish — inputMode=decimal default, dialog padding, more-sheet touch targets
Three audit-pass-#3 mobile findings, all in shared primitives so the fix lands everywhere those primitives are used. - Input defaults inputMode='decimal' when type='number' and the caller hasn't overridden. Currency/dimension/price fields across invoices, expenses, berth specs etc. now show iOS's numeric pad instead of full QWERTY. Caller can still pass inputMode='numeric' for integer-only fields. - DialogContent: padding tightens to p-4 on mobile and restores p-6 at sm+ — the previous fixed p-6 ate ~48px of horizontal width on a 390px iPhone, crushing form-field space. Also adds a max-h-[100dvh] + overflow-y-auto so long modal forms scroll inside the dialog instead of pushing the close button off-screen. - MoreSheet (mobile bottom-tab "More" drawer): grid-cols-3 cells now enforce min-h-[88px] so each Apple-HIG-sized 44pt touch target gets reliable hit area. Icon size bumped from 6 to 7 for visual weight at the larger cell. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -43,7 +43,12 @@ const DialogContent = React.forwardRef<
|
||||
// individually so tailwind-merge doesn't collapse our centering classes.
|
||||
// (Don't use `inset-0` + `sm:inset-auto` here - twMerge sees that as a
|
||||
// conflict and silently strips `sm:left-[50%]` / `sm:top-[50%]`.)
|
||||
'fixed top-0 right-0 bottom-0 left-0 z-50 grid w-full gap-4 border-0 bg-background p-6 shadow-lg duration-200',
|
||||
// Padding: tighter on mobile (16px) so multi-field forms keep useful
|
||||
// working width on a 390px iPhone; original 24px restored at sm+.
|
||||
// Long forms get an internal scroll cap so the close button + footer
|
||||
// stay reachable without scrolling the whole page.
|
||||
'fixed top-0 right-0 bottom-0 left-0 z-50 grid w-full gap-4 border-0 bg-background p-4 shadow-lg duration-200 sm:p-6',
|
||||
'max-h-[100dvh] overflow-y-auto sm:max-h-[calc(100dvh-2rem)]',
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
'sm:top-[50%] sm:right-auto sm:bottom-auto sm:left-[50%] sm:max-w-lg sm:translate-x-[-50%] sm:translate-y-[-50%] sm:border sm:rounded-lg',
|
||||
'sm:data-[state=closed]:zoom-out-95 sm:data-[state=open]:zoom-in-95 sm:data-[state=closed]:slide-out-to-left-1/2 sm:data-[state=closed]:slide-out-to-top-[48%] sm:data-[state=open]:slide-in-from-left-1/2 sm:data-[state=open]:slide-in-from-top-[48%]',
|
||||
|
||||
Reference in New Issue
Block a user