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() {
994994 composerHandleRef?.current?.focusAtEnd();
995995 return false;
996996 }}
997 onBackdropPointerDown={() => {
998 setOpen(false);
999 }}
9971000 >
9981001 <Command
9991002 key={`${viewStack.length}-${browseGeneration}-${isBrowsing}`}
apps/web/src/components/ui/command.tsx+12-5
......@@ -43,7 +43,7 @@ function CommandDialogViewport({ className, ...props }: CommandDialogPrimitive.V
4343 return (
4444 <CommandDialogPrimitive.Viewport
4545 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]",
4747 className,
4848 )}
4949 data-slot="command-dialog-viewport"
......@@ -52,14 +52,21 @@ function CommandDialogViewport({ className, ...props }: CommandDialogPrimitive.V
5252 );
5353}
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}) {
5663 return (
5764 <CommandDialogPortal>
58 <CommandDialogBackdrop />
65 <CommandDialogBackdrop onPointerDown={onBackdropPointerDown} />
5966 <CommandDialogViewport>
6067 <CommandDialogPrimitive.Popup
6168 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%)]",
6370 className,
6471 )}
6572 data-slot="command-dialog-popup"
......@@ -137,7 +144,7 @@ function CommandPanel({ className, ...props }: React.ComponentProps<"div">) {
137144 return (
138145 <div
139146 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]",
141148 className,
142149 )}
143150 {...props}
apps/web/src/components/ui/scroll-area.tsx+1-1
......@@ -23,7 +23,7 @@ function ScrollArea({
2323 >
2424 <ScrollAreaPrimitive.Viewport
2525 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",
2727 scrollFade &&
2828 "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]",
2929 scrollbarGutter && "[scrollbar-gutter:stable]",