authorgravatar for jappyjan@users.noreply.github.comJan Jaap <jappyjan@users.noreply.github.com> 2026-05-01 03:12:48+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-04-30 18:12:48-07:00
log4ef361da737175900b503cb457754e74111fe8a5
treef56c9d72a13e30f9e4b7a587615c2b93665dd1b5
parentc07ac592d8c2177467f7471dea7ba4ff0fac99ab
signature Signed by PGP key B5690EEEBB952194

fix(mobile): enable touch scrolling in file picker modal (#2420)

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com> Co-authored-by: Julius Marminge <julius0216@outlook.com>

3 files changed, 16 insertions(+), 6 deletions(-)

apps/web/src/components/CommandPalette.tsx+3
...@@ -994,6 +994,9 @@ function OpenCommandPaletteDialog() {...@@ -994,6 +994,9 @@ function OpenCommandPaletteDialog() {
994 composerHandleRef?.current?.focusAtEnd();994 composerHandleRef?.current?.focusAtEnd();
995 return false;995 return false;
996 }}996 }}
997 onBackdropPointerDown={() => {
998 setOpen(false);
999 }}
997 >1000 >
998 <Command1001 <Command
999 key={`${viewStack.length}-${browseGeneration}-${isBrowsing}`}1002 key={`${viewStack.length}-${browseGeneration}-${isBrowsing}`}
apps/web/src/components/ui/command.tsx+12-5
...@@ -43,7 +43,7 @@ function CommandDialogViewport({ className, ...props }: CommandDialogPrimitive.V...@@ -43,7 +43,7 @@ function CommandDialogViewport({ className, ...props }: CommandDialogPrimitive.V
43 return (43 return (
44 <CommandDialogPrimitive.Viewport44 <CommandDialogPrimitive.Viewport
45 className={cn(45 className={cn(
46 "fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]",46 "pointer-events-none fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]",
47 className,47 className,
48 )}48 )}
49 data-slot="command-dialog-viewport"49 data-slot="command-dialog-viewport"
...@@ -52,14 +52,21 @@ function CommandDialogViewport({ className, ...props }: CommandDialogPrimitive.V...@@ -52,14 +52,21 @@ function CommandDialogViewport({ className, ...props }: CommandDialogPrimitive.V
52 );52 );
53}53}
5454
55function CommandDialogPopup({ className, children, ...props }: CommandDialogPrimitive.Popup.Props) {55function CommandDialogPopup({
56 className,
57 children,
58 onBackdropPointerDown,
59 ...props
60}: CommandDialogPrimitive.Popup.Props & {
61 onBackdropPointerDown?: React.PointerEventHandler<HTMLDivElement>;
62}) {
56 return (63 return (
57 <CommandDialogPortal>64 <CommandDialogPortal>
58 <CommandDialogBackdrop />65 <CommandDialogBackdrop onPointerDown={onBackdropPointerDown} />
59 <CommandDialogViewport>66 <CommandDialogViewport>
60 <CommandDialogPrimitive.Popup67 <CommandDialogPrimitive.Popup
61 className={cn(68 className={cn(
62 "-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",69 "pointer-events-auto -translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
63 className,70 className,
64 )}71 )}
65 data-slot="command-dialog-popup"72 data-slot="command-dialog-popup"
...@@ -137,7 +144,7 @@ function CommandPanel({ className, ...props }: React.ComponentProps<"div">) {...@@ -137,7 +144,7 @@ function CommandPanel({ className, ...props }: React.ComponentProps<"div">) {
137 return (144 return (
138 <div145 <div
139 className={cn(146 className={cn(
140 "-mx-px not-has-[+[data-slot=command-footer]]:-mb-px relative min-h-0 rounded-t-xl not-has-[+[data-slot=command-footer]]:rounded-b-2xl border border-b-0 bg-popover bg-clip-padding shadow-xs/5 [clip-path:inset(0_1px)] not-has-[+[data-slot=command-footer]]:[clip-path:inset(0_1px_1px_1px_round_0_0_calc(var(--radius-2xl)-1px)_calc(var(--radius-2xl)-1px))] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2",147 "-mx-px not-has-[+[data-slot=command-footer]]:-mb-px relative min-h-0 overflow-hidden rounded-t-xl not-has-[+[data-slot=command-footer]]:rounded-b-2xl border border-b-0 bg-popover bg-clip-padding shadow-xs/5 [clip-path:inset(0_1px)] not-has-[+[data-slot=command-footer]]:[clip-path:inset(0_1px_1px_1px_round_0_0_calc(var(--radius-2xl)-1px)_calc(var(--radius-2xl)-1px))] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2 [touch-action:pan-y]",
141 className,148 className,
142 )}149 )}
143 {...props}150 {...props}
apps/web/src/components/ui/scroll-area.tsx+1-1
...@@ -23,7 +23,7 @@ function ScrollArea({...@@ -23,7 +23,7 @@ function ScrollArea({
23 >23 >
24 <ScrollAreaPrimitive.Viewport24 <ScrollAreaPrimitive.Viewport
25 className={cn(25 className={cn(
26 "h-full overscroll-contain rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-x:overscroll-x-contain",26 "h-full overflow-y-auto overscroll-contain rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-x:overscroll-x-contain",
27 scrollFade &&27 scrollFade &&
28 "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",28 "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",
29 scrollbarGutter && "[scrollbar-gutter:stable]",29 scrollbarGutter && "[scrollbar-gutter:stable]",