Bug: Settings & Connect Provider dialogs hide their scrollbar (v2 layout) — Windows and Ubuntu

Description

Bug: Settings & Connect Provider dialogs hide their scrollbar (v2 layout) — Windows and Ubuntu

Description

OpenCode Desktop hides the scrollbar in two places in the settings area,
leaving content below the fold unreachable when the window is short
(reproduced on laptop screens):

1. File > Settings — no scrollbar in the left navigation sidebar or the
   content panels.
2. File > Settings > Providers > Show More Providers — the Connect Provider
   dialog's provider list has no scrollbar. A fade-out gradient at the bottom
   masks the overflow, giving no indication the list continues.

Reproduced on Windows (WebView2) and Ubuntu (Electron). Both bugs live in the
v2 layout, which is ON by default via the "New layout designs" setting
(settings.general.newLayoutDesigns, default true).

Environment

• OpenCode Desktop v1.18.25
• Windows 10/11 (WebView2 runtime), Ubuntu Linux (Electron)
• Tested with "New layout designs" ON (default)

Root cause

The v2 settings panels render with the class settings-v2-panel, whose CSS
explicitly hides the scrollbar:

.settings-v2-panel {
  overflow-y: auto;
  scrollbar-width: none;
}
.settings-v2-panel::-webkit-scrollbar {
  display: none;
}

The left navigation uses [data-slot="tabs-v2-list"] with overflow-y: auto
and no visible scrollbar styling.

The Connect Provider list scroll container is rendered by a template in the
Connect Provider dialog bundle (ProviderPickerV2, template _tmpl$6) that
hides its scrollbar:

<div class="flex size-full min-h-0 flex-col gap-4 overflow-y-auto pb-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">

The legacy v1 layout has the same problem (Settings Tabs.Content with
no-scrollbar; Connect Provider List with data-slot=list-scroll).

Expected behavior

The Settings and Connect Provider dialogs should show a scrollbar (at least on
hover) so content can be scrolled and dragged without requiring a scroll wheel.

Proposed fix

1. CSS — append these rules to the theme's main CSS bundle

These reveal always-visible, thin scrollbars in the settings dialog (v2
layout) and the Connect Provider list:

/* ---- Settings dialog V2: always-visible scrollbars ---- */
.settings-v2-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 127, 127, 0.6) rgba(127, 127, 127, 0.15);
}

.settings-v2-panel::-webkit-scrollbar {
  display: block;
  width: 8px;
  height: 8px;
}

.settings-v2-panel::-webkit-scrollbar-thumb {
  background-color: rgba(127, 127, 127, 0.6);
  border-radius: 4px;
  min-height: 32px;
}

.settings-v2-panel::-webkit-scrollbar-track {
  background-color: rgba(127, 127, 127, 0.15);
  border-radius: 4px;
}

[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 127, 127, 0.6) rgba(127, 127, 127, 0.15);
}

[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"]::-webkit-scrollbar {
  display: block;
  width: 8px;
  height: 8px;
}

[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"]::-webkit-scrollbar-thumb {
  background-color: rgba(127, 127, 127, 0.6);
  border-radius: 4px;
  min-height: 32px;
}

[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"]::-webkit-scrollbar-track {
  background-color: rgba(127, 127, 127, 0.15);
  border-radius: 4px;
}

/* ---- Connect Provider dialog: visible scrollbar ---- */
[data-provider-list] {
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 127, 127, 0.6) rgba(127, 127, 127, 0.15);
}

[data-provider-list]::-webkit-scrollbar {
  display: block;
  width: 8px;
  height: 8px;
}

[data-provider-list]::-webkit-scrollbar-thumb {
  background-color: rgba(127, 127, 127, 0.6);
  border-radius: 4px;
  min-height: 32px;
}

[data-provider-list]::-webkit-scrollbar-track {
  background-color: rgba(127, 127, 127, 0.15);
  border-radius: 4px;
}

Why it works: for WebKit/Chromium (Electron, WebView2) the rules set
::-webkit-scrollbar { display: block; width: 8px } and style the thumb, which
overrides the app's earlier display: none rules because they are appended
later in the cascade at equal/higher specificity. For Gecko (scrollbar-width
/ scrollbar-color) the thin + color shorthand replaces
scrollbar-width: none.

2. JS — provider list scroll container (ProviderPickerV2)

Replace the scroll container opening tag so it no longer hides its scrollbar
and gets a stable hook for the CSS:

Before:

<div class="flex size-full min-h-0 flex-col gap-4 overflow-y-auto pb-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">

After:

<div class="flex size-full min-h-0 flex-col gap-4 overflow-y-auto pb-8" data-provider-list="true" style="scrollbar-width:thin;scrollbar-color:rgba(127,127,127,0.6) rgba(127,127,127,0.15)">

The inline style covers Gecko immediately; the data-provider-list attribute
lets the CSS above style the WebKit scrollbar.

Verification

The fix was applied locally to the compiled bundle (app.asar) and confirmed
working on both platforms:

• Ubuntu (Electron): CSS appended to main-CIkHDf4N.css; JS edit to
  dialog-connect-provider-BcJIiHFK.js
• Windows (WebView2): CSS appended to main-_WSrxsO0.css; JS edit to
  dialog-connect-provider-DXZyqrYB.js

Asset filenames differ per platform only because they are build-hashed; the
fix itself is identical.

Checklist after applying:

• File > Settings: left sidebar and content panels show thin scrollbars.
• File > Settings > Providers > Show More Providers: provider list shows a
  thin scrollbar that is visible and draggable.

Upstream note: this patch edits the compiled bundle inside app.asar, not the
source. The proper source-level fix is in the v2 settings CSS/components (the
settings-v2-panel and tabs-v2-list rules and the ProviderPickerV2
template).

Related issues

• #34108 (same symptom in the v1-era settings dialog panels, fixed by #35555 —
  this issue reports it in the v2 layout)
• #12166, #15511

Plugins

No response

OpenCode version

No response

Steps to reproduce

No response

Screenshot and/or share link

No response

Operating System

Windows 11 and Ubuntu 24.04

Terminal

No response