From f9c350d81efe4860d24afd087c708555ee6292a1 Mon Sep 17 00:00:00 2001 From: Samigos Date: Mon, 2 Nov 2026 14:41:22 +0200 Subject: [PATCH 1/6] feat(web): add inset scrollbars accessibility setting Co-Authored-By: Claude Opus 5.5 --- apps/web/src/appInit.tsx | 3 +++ .../src/components/chat/ThreadDetailsCard.tsx | 3 ++- .../settings/AppearanceSettingsPanel.tsx | 24 +++++++++++++++++++ .../components/settings/SettingsPanels.tsx | 4 ++++ .../src/components/settings/settingsSearch.ts | 6 +++++ apps/web/src/components/ui/scroll-area.tsx | 2 +- apps/web/src/index.css | 16 ++++++++++++- apps/web/src/terminal/ghostty/surface.ts | 2 +- docs/user/appearance.md | 6 +++++ packages/contracts/src/settings.ts | 2 ++ 10 files changed, 64 insertions(+), 4 deletions(-) diff --git a/apps/web/src/appInit.tsx b/apps/web/src/appInit.tsx index 9d77c475155cb..e42cc9e54300e 100644 --- a/apps/web/src/appInit.tsx +++ b/apps/web/src/appInit.tsx @@ -78,6 +78,9 @@ function startClientAppearance(): void { if (previous?.chatWidth !== settings.chatWidth) { root.dataset.chatWidth = settings.chatWidth; } + if (previous?.insetScrollbars !== settings.insetScrollbars) { + root.toggleAttribute("data-inset-scrollbars", settings.insetScrollbars); + } if (previous?.appearanceContrast !== settings.appearanceContrast) { applyAppearanceContrast(root, settings.appearanceContrast); } diff --git a/apps/web/src/components/chat/ThreadDetailsCard.tsx b/apps/web/src/components/chat/ThreadDetailsCard.tsx index 969172c77a972..759b70184c0e8 100644 --- a/apps/web/src/components/chat/ThreadDetailsCard.tsx +++ b/apps/web/src/components/chat/ThreadDetailsCard.tsx @@ -115,7 +115,8 @@ export function ThreadDetailsCard({ const card = (
+ + + + updateSettings({ insetScrollbars: DEFAULT_UNIFIED_SETTINGS.insetScrollbars }) + } + /> + ) : null + } + control={ + updateSettings({ insetScrollbars: Boolean(checked) })} + aria-label="Inset scrollbars" + /> + } + /> + ); } diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx index 362210f96eee1..1fbbb8ba712eb 100644 --- a/apps/web/src/components/settings/SettingsPanels.tsx +++ b/apps/web/src/components/settings/SettingsPanels.tsx @@ -458,6 +458,9 @@ export function useSettingsRestore(onRestored?: () => void) { ...(settings.mathRenderingEnabled !== DEFAULT_UNIFIED_SETTINGS.mathRenderingEnabled ? ["Render math"] : []), + ...(settings.insetScrollbars !== DEFAULT_UNIFIED_SETTINGS.insetScrollbars + ? ["Inset scrollbars"] + : []), ...(settings.panelAnimationDurationMs !== DEFAULT_UNIFIED_SETTINGS.panelAnimationDurationMs ? ["Panel animations"] : []), @@ -629,6 +632,7 @@ export function useSettingsRestore(onRestored?: () => void) { chatWidth: DEFAULT_UNIFIED_SETTINGS.chatWidth, effortDisplay: DEFAULT_UNIFIED_SETTINGS.effortDisplay, mathRenderingEnabled: DEFAULT_UNIFIED_SETTINGS.mathRenderingEnabled, + insetScrollbars: DEFAULT_UNIFIED_SETTINGS.insetScrollbars, timestampFormat: DEFAULT_UNIFIED_SETTINGS.timestampFormat, notificationMode: DEFAULT_UNIFIED_SETTINGS.notificationMode, inAppNotificationsEnabled: DEFAULT_UNIFIED_SETTINGS.inAppNotificationsEnabled, diff --git a/apps/web/src/components/settings/settingsSearch.ts b/apps/web/src/components/settings/settingsSearch.ts index e61a064431c55..1c62fdaae6ae1 100644 --- a/apps/web/src/components/settings/settingsSearch.ts +++ b/apps/web/src/components/settings/settingsSearch.ts @@ -415,6 +415,12 @@ export const SETTINGS_SEARCH_ITEMS = [ title: "Composer context", to: "/settings/appearance", }, + { + id: "inset-scrollbars", + title: "Inset scrollbars", + to: "/settings/appearance", + searchTerms: ["accessibility scrollbar padding edge grab click easier"], + }, { id: "project-grouping", title: "Project grouping", diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx index ab31b7ca31d88..39758234ec60c 100644 --- a/apps/web/src/components/ui/scroll-area.tsx +++ b/apps/web/src/components/ui/scroll-area.tsx @@ -84,7 +84,7 @@ function ScrollBar({ return ( :first-child { diff --git a/apps/web/src/terminal/ghostty/surface.ts b/apps/web/src/terminal/ghostty/surface.ts index a1a762cd8a7ef..7a24e08e8b7fb 100644 --- a/apps/web/src/terminal/ghostty/surface.ts +++ b/apps/web/src/terminal/ghostty/surface.ts @@ -693,7 +693,7 @@ export class GhosttyTerminalSurface { scrollbar.hidden = true; const scrollbarThumb = document.createElement("div"); scrollbarThumb.className = - "absolute inset-x-px top-0 rounded-[3px] bg-[var(--app-scrollbar-thumb)] transition-[background-color] duration-[120ms] ease-[ease-out] group-hover:bg-[var(--app-scrollbar-thumb-hover)] group-focus-visible:bg-[var(--app-scrollbar-thumb-hover)]"; + "absolute left-px right-[calc(1px+var(--app-scrollbar-edge-inset))] top-0 rounded-[3px] bg-[var(--app-scrollbar-thumb)] transition-[background-color] duration-[120ms] ease-[ease-out] group-hover:bg-[var(--app-scrollbar-thumb-hover)] group-focus-visible:bg-[var(--app-scrollbar-thumb-hover)]"; scrollbar.append(scrollbarThumb); mount.replaceChildren(canvas, input, scrollbar); diff --git a/docs/user/appearance.md b/docs/user/appearance.md index 49d8e02d79a82..5429c514c30f8 100644 --- a/docs/user/appearance.md +++ b/docs/user/appearance.md @@ -48,6 +48,12 @@ The main sidebar, right panel, and terminal drawer open and close immediately by in your operating system. Moving between threads always snaps to the selected thread's panel state without replaying its transitions. +## Accessibility + +Turn on **Inset scrollbars** under **Settings → Appearance → Accessibility** to move vertical +scrollbars a few pixels away from the right edge of each pane, so they are easier to grab without +hitting the window's resize edge. This preference applies to the web and desktop clients. + ## Custom themes On web and desktop, choose **Create theme** to adjust a palette, or import a T3 Code or VS Code diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts index 4bb3119561b08..5e658fb5c8e26 100644 --- a/packages/contracts/src/settings.ts +++ b/packages/contracts/src/settings.ts @@ -523,6 +523,7 @@ export const ClientSettingsSchema = Schema.Struct({ // Opt-in TeX typesetting in rendered Markdown. Off keeps math parsing and // KaTeX out of the render path entirely. mathRenderingEnabled: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))), + insetScrollbars: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))), }); export type ClientSettings = typeof ClientSettingsSchema.Type; @@ -1833,5 +1834,6 @@ export const ClientSettingsPatch = Schema.Struct({ snapShotAnimations: Schema.optionalKey(Schema.Boolean), wordWrap: Schema.optionalKey(Schema.Boolean), mathRenderingEnabled: Schema.optionalKey(Schema.Boolean), + insetScrollbars: Schema.optionalKey(Schema.Boolean), }); export type ClientSettingsPatch = typeof ClientSettingsPatch.Type; From 6090e36affff621d84f3891d19fc7967ff768448 Mon Sep 17 00:00:00 2001 From: maria-rcks Date: Mon, 2 Nov 2026 22:35:59 +0000 Subject: [PATCH 2/6] feat(web): inset scrollbars by default --- apps/web/src/index.css | 2 +- docs/user/appearance.md | 6 +++--- packages/contracts/src/settings.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 7c911187641b4..4d4f316b562c0 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -2172,7 +2172,7 @@ code { } .chat-markdown pre::-webkit-scrollbar { - height: var(--app-scrollbar-width); + height: 6px; } .chat-markdown pre::-webkit-scrollbar-thumb { diff --git a/docs/user/appearance.md b/docs/user/appearance.md index 5429c514c30f8..8da1d01b4f25a 100644 --- a/docs/user/appearance.md +++ b/docs/user/appearance.md @@ -50,9 +50,9 @@ without replaying its transitions. ## Accessibility -Turn on **Inset scrollbars** under **Settings → Appearance → Accessibility** to move vertical -scrollbars a few pixels away from the right edge of each pane, so they are easier to grab without -hitting the window's resize edge. This preference applies to the web and desktop clients. +**Inset scrollbars** is on by default in the web and desktop clients, moving vertical scrollbars +a few pixels away from each pane's right edge so they are easier to grab without hitting the +window's resize edge. Turn it off under **Settings → Appearance → Accessibility**. ## Custom themes diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts index 5e658fb5c8e26..146edf6f7430d 100644 --- a/packages/contracts/src/settings.ts +++ b/packages/contracts/src/settings.ts @@ -523,7 +523,7 @@ export const ClientSettingsSchema = Schema.Struct({ // Opt-in TeX typesetting in rendered Markdown. Off keeps math parsing and // KaTeX out of the render path entirely. mathRenderingEnabled: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))), - insetScrollbars: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))), + insetScrollbars: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(true))), }); export type ClientSettings = typeof ClientSettingsSchema.Type; From 3f0b13c254b578782cb459d4935ff1595180e548 Mon Sep 17 00:00:00 2001 From: maria-rcks Date: Mon, 2 Nov 2026 23:04:43 +0000 Subject: [PATCH 3/6] fix(web): inset scrollbar gap grabs the thumb --- apps/web/src/components/ui/scroll-area.tsx | 4 ++-- apps/web/src/terminal/ghostty/surface.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx index 39758234ec60c..30616fcb335ec 100644 --- a/apps/web/src/components/ui/scroll-area.tsx +++ b/apps/web/src/components/ui/scroll-area.tsx @@ -84,7 +84,7 @@ function ScrollBar({ return ( diff --git a/apps/web/src/terminal/ghostty/surface.ts b/apps/web/src/terminal/ghostty/surface.ts index 7a24e08e8b7fb..3952b03f854ea 100644 --- a/apps/web/src/terminal/ghostty/surface.ts +++ b/apps/web/src/terminal/ghostty/surface.ts @@ -693,7 +693,7 @@ export class GhosttyTerminalSurface { scrollbar.hidden = true; const scrollbarThumb = document.createElement("div"); scrollbarThumb.className = - "absolute left-px right-[calc(1px+var(--app-scrollbar-edge-inset))] top-0 rounded-[3px] bg-[var(--app-scrollbar-thumb)] transition-[background-color] duration-[120ms] ease-[ease-out] group-hover:bg-[var(--app-scrollbar-thumb-hover)] group-focus-visible:bg-[var(--app-scrollbar-thumb-hover)]"; + "absolute inset-x-px top-0 border-r-(length:--app-scrollbar-edge-inset) border-transparent bg-[var(--app-scrollbar-thumb)] bg-clip-padding rounded-[3px_calc(3px+var(--app-scrollbar-edge-inset))_calc(3px+var(--app-scrollbar-edge-inset))_3px/3px] transition-[background-color] duration-[120ms] ease-[ease-out] group-hover:bg-[var(--app-scrollbar-thumb-hover)] group-focus-visible:bg-[var(--app-scrollbar-thumb-hover)]"; scrollbar.append(scrollbarThumb); mount.replaceChildren(canvas, input, scrollbar); From 90286dc684124829916306f836354159a37e6011 Mon Sep 17 00:00:00 2001 From: maria-rcks Date: Tue, 3 Nov 2026 21:26:09 +0000 Subject: [PATCH 4/6] refactor(web): always inset scrollbars, drop the setting --- apps/web/src/appInit.tsx | 3 --- .../src/components/chat/ThreadDetailsCard.tsx | 2 +- .../settings/AppearanceSettingsPanel.tsx | 24 ------------------- .../components/settings/SettingsPanels.tsx | 4 ---- .../src/components/settings/settingsSearch.ts | 6 ----- apps/web/src/index.css | 10 +++----- docs/user/appearance.md | 6 ----- packages/contracts/src/settings.ts | 2 -- 8 files changed, 4 insertions(+), 53 deletions(-) diff --git a/apps/web/src/appInit.tsx b/apps/web/src/appInit.tsx index e42cc9e54300e..9d77c475155cb 100644 --- a/apps/web/src/appInit.tsx +++ b/apps/web/src/appInit.tsx @@ -78,9 +78,6 @@ function startClientAppearance(): void { if (previous?.chatWidth !== settings.chatWidth) { root.dataset.chatWidth = settings.chatWidth; } - if (previous?.insetScrollbars !== settings.insetScrollbars) { - root.toggleAttribute("data-inset-scrollbars", settings.insetScrollbars); - } if (previous?.appearanceContrast !== settings.appearanceContrast) { applyAppearanceContrast(root, settings.appearanceContrast); } diff --git a/apps/web/src/components/chat/ThreadDetailsCard.tsx b/apps/web/src/components/chat/ThreadDetailsCard.tsx index 759b70184c0e8..a06836d2224c4 100644 --- a/apps/web/src/components/chat/ThreadDetailsCard.tsx +++ b/apps/web/src/components/chat/ThreadDetailsCard.tsx @@ -115,7 +115,7 @@ export function ThreadDetailsCard({ const card = (
- - - - updateSettings({ insetScrollbars: DEFAULT_UNIFIED_SETTINGS.insetScrollbars }) - } - /> - ) : null - } - control={ - updateSettings({ insetScrollbars: Boolean(checked) })} - aria-label="Inset scrollbars" - /> - } - /> - ); } diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx index 1fbbb8ba712eb..362210f96eee1 100644 --- a/apps/web/src/components/settings/SettingsPanels.tsx +++ b/apps/web/src/components/settings/SettingsPanels.tsx @@ -458,9 +458,6 @@ export function useSettingsRestore(onRestored?: () => void) { ...(settings.mathRenderingEnabled !== DEFAULT_UNIFIED_SETTINGS.mathRenderingEnabled ? ["Render math"] : []), - ...(settings.insetScrollbars !== DEFAULT_UNIFIED_SETTINGS.insetScrollbars - ? ["Inset scrollbars"] - : []), ...(settings.panelAnimationDurationMs !== DEFAULT_UNIFIED_SETTINGS.panelAnimationDurationMs ? ["Panel animations"] : []), @@ -632,7 +629,6 @@ export function useSettingsRestore(onRestored?: () => void) { chatWidth: DEFAULT_UNIFIED_SETTINGS.chatWidth, effortDisplay: DEFAULT_UNIFIED_SETTINGS.effortDisplay, mathRenderingEnabled: DEFAULT_UNIFIED_SETTINGS.mathRenderingEnabled, - insetScrollbars: DEFAULT_UNIFIED_SETTINGS.insetScrollbars, timestampFormat: DEFAULT_UNIFIED_SETTINGS.timestampFormat, notificationMode: DEFAULT_UNIFIED_SETTINGS.notificationMode, inAppNotificationsEnabled: DEFAULT_UNIFIED_SETTINGS.inAppNotificationsEnabled, diff --git a/apps/web/src/components/settings/settingsSearch.ts b/apps/web/src/components/settings/settingsSearch.ts index 1c62fdaae6ae1..e61a064431c55 100644 --- a/apps/web/src/components/settings/settingsSearch.ts +++ b/apps/web/src/components/settings/settingsSearch.ts @@ -415,12 +415,6 @@ export const SETTINGS_SEARCH_ITEMS = [ title: "Composer context", to: "/settings/appearance", }, - { - id: "inset-scrollbars", - title: "Inset scrollbars", - to: "/settings/appearance", - searchTerms: ["accessibility scrollbar padding edge grab click easier"], - }, { id: "project-grouping", title: "Project grouping", diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 4d4f316b562c0..678c6c5fa9320 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -89,7 +89,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil } :root { - --app-scrollbar-edge-inset: 0px; + --app-scrollbar-edge-inset: 4px; --app-scrollbar-width: calc(6px + var(--app-scrollbar-edge-inset)); --appearance-contrast-base: 100%; --appearance-contrast-boost: 0%; @@ -1866,12 +1866,8 @@ code { background: var(--app-scrollbar-thumb-hover); } -/* Accessibility: keep vertical thumbs off the window edge, where resize - handles steal the pointer. The transparent border keeps the gap clickable. */ -:root[data-inset-scrollbars] { - --app-scrollbar-edge-inset: 4px; -} - +/* Keeps vertical thumbs off the window edge, where resize handles steal the + pointer. The transparent border keeps the gap clickable. */ ::-webkit-scrollbar-thumb:vertical { border-right: var(--app-scrollbar-edge-inset) solid transparent; border-radius: 3px calc(3px + var(--app-scrollbar-edge-inset)) diff --git a/docs/user/appearance.md b/docs/user/appearance.md index 8da1d01b4f25a..49d8e02d79a82 100644 --- a/docs/user/appearance.md +++ b/docs/user/appearance.md @@ -48,12 +48,6 @@ The main sidebar, right panel, and terminal drawer open and close immediately by in your operating system. Moving between threads always snaps to the selected thread's panel state without replaying its transitions. -## Accessibility - -**Inset scrollbars** is on by default in the web and desktop clients, moving vertical scrollbars -a few pixels away from each pane's right edge so they are easier to grab without hitting the -window's resize edge. Turn it off under **Settings → Appearance → Accessibility**. - ## Custom themes On web and desktop, choose **Create theme** to adjust a palette, or import a T3 Code or VS Code diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts index 146edf6f7430d..4bb3119561b08 100644 --- a/packages/contracts/src/settings.ts +++ b/packages/contracts/src/settings.ts @@ -523,7 +523,6 @@ export const ClientSettingsSchema = Schema.Struct({ // Opt-in TeX typesetting in rendered Markdown. Off keeps math parsing and // KaTeX out of the render path entirely. mathRenderingEnabled: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))), - insetScrollbars: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(true))), }); export type ClientSettings = typeof ClientSettingsSchema.Type; @@ -1834,6 +1833,5 @@ export const ClientSettingsPatch = Schema.Struct({ snapShotAnimations: Schema.optionalKey(Schema.Boolean), wordWrap: Schema.optionalKey(Schema.Boolean), mathRenderingEnabled: Schema.optionalKey(Schema.Boolean), - insetScrollbars: Schema.optionalKey(Schema.Boolean), }); export type ClientSettingsPatch = typeof ClientSettingsPatch.Type; From 6625a96eaf59af7d3c0d615c9a8189547c0ac92a Mon Sep 17 00:00:00 2001 From: Theo Browne Date: Thu, 12 Nov 2026 03:49:01 -0800 Subject: [PATCH 5/6] fix(web): inset only pane-edge scrollbars The inset applied to every scrollbar. That painted the terminal thumb over the last text column, widened the ScrollArea overlay inside floating cards, and made the lane 4px wider in every popover and input. It is now opt-in. Pane scrollers that already reserve a stable gutter take the scrollbar-edge-inset class, pane ScrollAreas take the edgeInset prop, and the terminal grid leaves the inset free. The thread details card and the find bar move through their layout math instead of a paint offset. Co-Authored-By: Claude Fable 5.2 --- apps/web/src/components/DiffPanel.tsx | 2 +- .../src/components/chat/MessagesTimeline.tsx | 2 +- .../src/components/chat/ThreadDetailsCard.tsx | 7 +++--- .../web/src/components/chat/ThreadFindBar.tsx | 2 +- .../chat/threadDetailsCardLayout.ts | 8 +++++-- .../files/AttachmentFilePreview.tsx | 2 +- .../web/src/components/files/BinaryViewer.tsx | 4 ++-- .../src/components/files/FilePreviewPanel.tsx | 4 ++-- .../src/components/files/MermaidViewer.tsx | 2 +- .../src/components/files/NotebookPreview.tsx | 5 +++- apps/web/src/components/files/PdfViewer.tsx | 2 +- .../files/ReadOnlySourcePreview.tsx | 2 +- .../src/components/onboarding/WelcomePage.tsx | 2 +- .../pullRequest/PullRequestCodeTab.tsx | 2 +- .../pullRequest/PullRequestSummaryTab.tsx | 2 +- .../pullRequest/PullRequestTimelineTab.tsx | 7 ++++-- .../pullRequest/PullRequestsColumn.tsx | 2 +- .../pullRequest/guide/GuideTour.tsx | 5 +++- apps/web/src/components/ui/scroll-area.tsx | 20 ++++++++++++---- .../web/src/components/ui/standalone-page.tsx | 2 +- apps/web/src/index.css | 24 +++++++++++++------ apps/web/src/lib/scrollbarEdgeInset.ts | 2 ++ apps/web/src/terminal/ghostty/surface.ts | 21 ++++++++++++---- 23 files changed, 90 insertions(+), 41 deletions(-) create mode 100644 apps/web/src/lib/scrollbarEdgeInset.ts diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx index 4231b669aa76b..73de6d7d74815 100644 --- a/apps/web/src/components/DiffPanel.tsx +++ b/apps/web/src/components/DiffPanel.tsx @@ -1451,7 +1451,7 @@ export default function DiffPanel({ viewerRef={attachCodeView} onScroll={codeViewScroll.onScroll} codeViewKey={codeViewMountKey} - className="h-full min-h-0 overflow-auto" + className="scrollbar-gutter-stable scrollbar-edge-inset h-full min-h-0 overflow-auto" files={codeViewFiles} pendingFiles={pendingFiles} renderCodeViewFooter={renderLoadingBoundary} diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx index 3bbea6a44eb21..18192819b406a 100644 --- a/apps/web/src/components/chat/MessagesTimeline.tsx +++ b/apps/web/src/components/chat/MessagesTimeline.tsx @@ -1460,7 +1460,7 @@ const ConversationTimeline = memo(function ConversationTimeline({ onItemSizeChanged={scheduleMinimapRefresh} onMetricsChange={scheduleMinimapRefresh} className={cn( - "messages-timeline-scroll scrollbar-gutter-both h-full min-h-0 overflow-x-hidden overscroll-y-contain [overflow-anchor:none]", + "messages-timeline-scroll scrollbar-gutter-both scrollbar-edge-inset h-full min-h-0 overflow-x-hidden overscroll-y-contain [overflow-anchor:none]", topFadeEnabled && "topbar-scroll-fade", )} ListHeaderComponent={listHeader} diff --git a/apps/web/src/components/chat/ThreadDetailsCard.tsx b/apps/web/src/components/chat/ThreadDetailsCard.tsx index b2a834d8cde4a..10e5c4acff951 100644 --- a/apps/web/src/components/chat/ThreadDetailsCard.tsx +++ b/apps/web/src/components/chat/ThreadDetailsCard.tsx @@ -13,7 +13,7 @@ import { Popover, PopoverPopup, PopoverCreateHandle } from "../ui/popover"; import { selectThreadPanelOpen, useRightPanelStore } from "../../rightPanelStore"; import { useChatCanvas } from "./ChatCanvasContext"; import { - THREAD_DETAILS_CARD_GAP, + THREAD_DETAILS_CARD_RIGHT, resolveThreadDetailsCardDensity, } from "./threadDetailsCardLayout"; import { observeResize } from "../../lib/observeResize"; @@ -115,8 +115,7 @@ export function ThreadDetailsCard({ const card = (
) : kind === "markdown" && rendered ? ( - + ) : null ) : archive ? ( -
+
) : rows ? ( -
+
+ ); return ( -
+
{expanded ? ( Saved outputs only. Code is never executed. -
+
{props.notebook.cells.slice(0, visible).map((cell, index) => (
{ const top = event.currentTarget.scrollTop; setScrollTop(top); diff --git a/apps/web/src/components/files/ReadOnlySourcePreview.tsx b/apps/web/src/components/files/ReadOnlySourcePreview.tsx index 2fdfe04a238d6..8478aca0adf75 100644 --- a/apps/web/src/components/files/ReadOnlySourcePreview.tsx +++ b/apps/web/src/components/files/ReadOnlySourcePreview.tsx @@ -23,7 +23,7 @@ export default function ReadOnlySourcePreview(props: { {/* The desktop window only moves where CSS opts in, so keep a titlebar strip. */} {isElectron ? : null} -
+

Welcome to T3 Code diff --git a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx index febf82441f514..c770634c26643 100644 --- a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx +++ b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx @@ -1661,7 +1661,7 @@ function PullRequestCodeTab({ {/* The viewer must own its scroll element to position virtual rows within it. */} - className="@container h-full overflow-auto [scrollbar-gutter:stable]" + className="@container scrollbar-edge-inset h-full overflow-auto [scrollbar-gutter:stable]" containerRef={scrollerRef} viewerRef={codeViewReveal.attach} items={items} diff --git a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx index 4b706ef7eafd5..5da218924e9d6 100644 --- a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx +++ b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx @@ -827,7 +827,7 @@ export function PullRequestSummaryTab({ scrollRef.current = node; scrollerRef(node); }} - className="h-full overflow-y-auto" + className="scrollbar-gutter-stable scrollbar-edge-inset h-full overflow-y-auto" data-pull-request-summary-scroll >
diff --git a/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx b/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx index abefb7e1d7e87..fa2dab86f72f3 100644 --- a/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx +++ b/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx @@ -879,7 +879,10 @@ export function PullRequestTimelineTab({ if (events.length === 0) { return ( -
+

No activity yet.

@@ -901,7 +904,7 @@ export function PullRequestTimelineTab({ keyExtractor={rowKey} renderItem={renderRow} estimatedItemSize={140} - className="scrollbar-gutter-both h-full px-4" + className="scrollbar-gutter-both scrollbar-edge-inset h-full px-4" contentContainerClassName="relative mx-auto w-full max-w-3xl before:absolute before:bottom-10 before:left-[15px] before:top-6 before:w-px before:bg-border/45" ListHeaderComponent={ anchor !== null && targetIndex < 0 && revealUrl === undefined ? ( diff --git a/apps/web/src/components/pullRequest/PullRequestsColumn.tsx b/apps/web/src/components/pullRequest/PullRequestsColumn.tsx index de66666f92813..957eb26dd0ea1 100644 --- a/apps/web/src/components/pullRequest/PullRequestsColumn.tsx +++ b/apps/web/src/components/pullRequest/PullRequestsColumn.tsx @@ -230,7 +230,7 @@ export function PullRequestsColumn({
diff --git a/apps/web/src/components/pullRequest/guide/GuideTour.tsx b/apps/web/src/components/pullRequest/guide/GuideTour.tsx index 81074bef9ce22..ac78ca01364ef 100644 --- a/apps/web/src/components/pullRequest/guide/GuideTour.tsx +++ b/apps/web/src/components/pullRequest/guide/GuideTour.tsx @@ -95,7 +95,10 @@ export function GuideTour({ }, [active]); return ( -
+