fix(desktop): Reveal scrollbar in settings dialog panels of desktop app (such that keyboard navigation and mice with out scroll functionality work)

packages/app/src/components/settings-general.tsx

@@ -30,6 +30,7 @@ import { decode64 } from "@/utils/base64"
 import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
 import { Link } from "./link"
 import { SettingsList } from "./settings-list"
+import { SettingsScroll } from "./settings-scroll"
 
 let demoSoundState = {
   cleanup: undefined as (() => void) | undefined,
@@ -720,7 +721,7 @@ export const SettingsGeneral: Component = () => {
   )
 
   return (
-    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+    <SettingsScroll>
       <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
         <div class="flex flex-col gap-1 pt-6 pb-8">
           <h2 class="text-16-medium text-text-strong">{language.t("settings.tab.general")}</h2>
@@ -744,7 +745,7 @@ export const SettingsGeneral: Component = () => {
           <AdvancedSection />
         </Show>
       </div>
-    </div>
+    </SettingsScroll>
   )
 }
 

packages/app/src/components/settings-keybinds.tsx

@@ -13,7 +13,9 @@ import fuzzysort from "fuzzysort"
 import { formatKeybind, parseKeybind, useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
+import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { SettingsList } from "./settings-list"
+import { SettingsScroll } from "./settings-scroll"
 import { SettingsListV2 } from "./settings-v2/parts/list"
 
 const IconV2 = lazy(() => import("@opencode-ai/ui/v2/icon").then((module) => ({ default: module.Icon })))
@@ -480,7 +482,7 @@ export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
     <Show
       when={props.v2}
       fallback={
-        <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+        <SettingsScroll>
           <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
             <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
               <div class="flex items-center justify-between gap-4">
@@ -511,10 +513,10 @@ export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
             </div>
           </div>
           {groups}
-        </div>
+        </SettingsScroll>
       }
     >
-      <>
+      <ScrollView class="flex-1 min-h-0">
         <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
           <div class="settings-v2-tab-header-row">
             <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
@@ -548,7 +550,7 @@ export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
           </div>
         </div>
         <div class="settings-v2-tab-body">{groups}</div>
-      </>
+      </ScrollView>
     </Show>
   )
 }

packages/app/src/components/settings-models.tsx

@@ -9,6 +9,7 @@ import { useLanguage } from "@/context/language"
 import { useModels } from "@/context/models"
 import { popularProviders } from "@/hooks/use-providers"
 import { SettingsList } from "./settings-list"
+import { SettingsScroll } from "./settings-scroll"
 import { SettingsServerPicker, SettingsServerScope } from "./settings-server-picker"
 
 type ModelItem = ReturnType<ReturnType<typeof useModels>["list"]>[number]
@@ -67,7 +68,7 @@ const SettingsModelsContent: Component = () => {
   })
 
   return (
-    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+    <SettingsScroll>
       <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
         <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
           <div class="flex items-center justify-between gap-4">
@@ -144,6 +145,6 @@ const SettingsModelsContent: Component = () => {
           </Show>
         </Show>
       </div>
-    </div>
+    </SettingsScroll>
   )
 }

packages/app/src/components/settings-providers.tsx

@@ -11,6 +11,7 @@ import { useServerSync } from "@/context/server-sync"
 import { DialogConnectProvider, useProviderConnectController } from "./dialog-connect-provider"
 import { DialogCustomProvider } from "./dialog-custom-provider"
 import { SettingsList } from "./settings-list"
+import { SettingsScroll } from "./settings-scroll"
 import { SettingsServerPicker, SettingsServerScope } from "./settings-server-picker"
 
 type ProviderSource = "env" | "api" | "config" | "custom"
@@ -143,7 +144,7 @@ const SettingsProvidersContent: Component<{ onBack?: () => void }> = (props) =>
   }
 
   return (
-    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+    <SettingsScroll>
       <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
         <div class="flex items-center justify-between gap-4 pt-6 pb-8 max-w-[720px]">
           <h2 class="text-16-medium text-text-strong">{language.t("settings.providers.title")}</h2>
@@ -254,6 +255,6 @@ const SettingsProvidersContent: Component<{ onBack?: () => void }> = (props) =>
           </Button>
         </div>
       </div>
-    </div>
+    </SettingsScroll>
   )
 }

packages/app/src/components/settings-scroll.tsx

@@ -0,0 +1,10 @@
+import { type Component, type JSX } from "solid-js"
+import { ScrollView } from "@opencode-ai/ui/scroll-view"
+
+export const SettingsScroll: Component<{ children: JSX.Element }> = (props) => {
+  return (
+    <ScrollView class="h-full">
+      <div class="flex flex-col px-4 pb-10 sm:px-10 sm:pb-10">{props.children}</div>
+    </ScrollView>
+  )
+}

packages/app/src/components/settings-v2/general.tsx

@@ -4,6 +4,7 @@ import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { Switch } from "@opencode-ai/ui/v2/switch-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/context/language"
@@ -687,7 +688,7 @@ export const SettingsGeneralV2: Component<{
   )
 
   return (
-    <>
+    <ScrollView class="flex-1 min-h-0">
       <div class="settings-v2-tab-header">
         <h2 class="settings-v2-tab-title">{language.t("settings.tab.general")}</h2>
       </div>
@@ -709,6 +710,6 @@ export const SettingsGeneralV2: Component<{
 
         <AdvancedSection />
       </div>
-    </>
+    </ScrollView>
   )
 }

packages/app/src/components/settings-v2/models.tsx

@@ -4,6 +4,7 @@ import { Switch } from "@opencode-ai/ui/v2/switch-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { type Component, For, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { useModels } from "@/context/models"
@@ -43,7 +44,7 @@ export const SettingsModelsV2: Component = () => {
   })
 
   return (
-    <>
+    <ScrollView class="flex-1 min-h-0">
       <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
         <h2 class="settings-v2-tab-title">{language.t("settings.models.title")}</h2>
         <div class="settings-v2-tab-search">
@@ -133,6 +134,6 @@ export const SettingsModelsV2: Component = () => {
           </Show>
         </Show>
       </div>
-    </>
+    </ScrollView>
   )
 }

packages/app/src/components/settings-v2/providers.tsx

@@ -2,6 +2,7 @@ import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { Tag } from "@opencode-ai/ui/v2/badge-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { showToast } from "@/utils/toast"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { createMemo, type Component, For, Show } from "solid-js"
@@ -137,7 +138,7 @@ export const SettingsProvidersV2: Component<{ onBack?: () => void }> = (props) =
   }
 
   return (
-    <>
+    <ScrollView class="flex-1 min-h-0">
       <div class="settings-v2-tab-header">
         <h2 class="settings-v2-tab-title">{language.t("settings.providers.title")}</h2>
       </div>
@@ -252,6 +253,6 @@ export const SettingsProvidersV2: Component<{ onBack?: () => void }> = (props) =
           </button>
         </div>
       </div>
-    </>
+    </ScrollView>
   )
 }

packages/app/src/components/settings-v2/servers.tsx

@@ -2,6 +2,7 @@ import { Tag } from "@opencode-ai/ui/v2/badge-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import fuzzysort from "fuzzysort"
 import { type Component, For, Show, createMemo } from "solid-js"
@@ -47,7 +48,7 @@ export const SettingsServersV2: Component = () => {
   }
 
   return (
-    <>
+    <ScrollView class="flex-1 min-h-0">
       <div
         class="settings-v2-tab-header settings-v2-servers-header"
         classList={{ "settings-v2-tab-header--stacked": showSearch() }}
@@ -134,6 +135,6 @@ export const SettingsServersV2: Component = () => {
           </SettingsListV2>
         </Show>
       </div>
-    </>
+    </ScrollView>
   )
 }

packages/ui/src/components/scroll-view.tsx

@@ -208,6 +208,9 @@ export function ScrollView(props: ScrollViewProps) {
   // We can also explicitly catch PageUp/Down if we want smooth scroll or specific behavior,
   // but native usually handles this perfectly. Let's explicitly ensure it behaves well.
   const onKeyDown = (e: KeyboardEvent) => {
+    // Defer to a descendant that already handled the key (e.g. an opening/open
+    // dropdown, listbox, or menu) — don't additionally scroll the viewport.
+    if (e.defaultPrevented) return
     // If user is focused on an input inside the scroll view, don't hijack keys
     if (document.activeElement && ["INPUT", "TEXTAREA", "SELECT"].includes(document.activeElement.tagName)) {
       return