Fix global scroll area overflow: add opt-in overflowX prop

Revert the default viewport overflow from 'overflow-auto' back to
'overflow-y-auto' so existing ScrollArea consumers don't get unexpected
horizontal scrollbars. Add an 'overflowX' prop that components can use
to opt into horizontal scrolling when needed (used by KeybindingsSettings
for its wide table).

Author: cursoragent

apps/web/src/components/settings/KeybindingsSettings.tsx

@@ -981,6 +981,7 @@ export function KeybindingsSettingsPanel() {
 
         <ScrollArea
           chainVerticalScroll
+          overflowX
           scrollFade
           hideScrollbars
           className="w-full max-w-full rounded-none"

apps/web/src/components/ui/scroll-area.tsx

@@ -11,12 +11,14 @@ function ScrollArea({
   scrollbarGutter = false,
   hideScrollbars = false,
   chainVerticalScroll = false,
+  overflowX = false,
   ...props
 }: ScrollAreaPrimitive.Root.Props & {
   scrollFade?: boolean;
   scrollbarGutter?: boolean;
   hideScrollbars?: boolean;
   chainVerticalScroll?: boolean;
+  overflowX?: boolean;
 }) {
   return (
     <ScrollAreaPrimitive.Root
@@ -25,7 +27,8 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         className={cn(
-          "h-full max-h-[inherit] overflow-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",
+          "h-full max-h-[inherit] 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",
+          overflowX && "overflow-x-auto",
           chainVerticalScroll && "overscroll-y-auto",
           scrollFade &&
             "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]",