highperfocused/multica
1
0
Fork 0
mirror of https://github.com/multica-ai/multica.git synced 2026-08-03 19:20:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(issues): keep detail content column centered under classic scrollbars

Browse Source 
On platforms where scrollbars take layout space (macOS with a mouse or
'always show', Windows, Linux), the global 'scrollbar-width: thin'
reserves ~11px on the right edge of the issue detail scroll container
only, so the centered max-w-4xl column reads 32px left vs 43px right
whitespace. Mirror the gutter with 'scrollbar-gutter: stable both-edges'
on the detail scroller and its loading skeleton; overlay-scrollbar
platforms reserve nothing and are unchanged.

Measured before: 32px / 43px. After: 43px / 43px.
This commit is contained in:
Lambda
2026-07-11 14:24:30 +08:00
parent 4efcfb96e3
commit fa3d7bfd9a
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/views/issues/components/issue-detail.tsx
View File

@@ -1420,7 +1420,9 @@ export function IssueDetail({ issueId, onDelete, onDone, defaultSidebarOpen = tr
<Skeleton className="h-4 w-24" />
</div>
<div className="flex flex-1 min-h-0">
<div className="flex-1 overflow-y-auto">
{/* Same scrollbar-gutter as the loaded scroller below, so the skeleton
column doesn't shift sideways when real content mounts. */}
<div className="flex-1 overflow-y-auto [scrollbar-gutter:stable_both-edges]">
<div className="mx-auto w-full max-w-4xl px-8 py-8 space-y-6">
<Skeleton className="h-8 w-3/4" />
<div className="space-y-2">
@@ -1952,10 +1954,16 @@ export function IssueDetail({ issueId, onDelete, onDone, defaultSidebarOpen = tr
}
/>
{/* scrollbar-gutter both-edges: with classic (space-taking) scrollbars —
macOS with a mouse or "always show", Windows, Linux — the global
`scrollbar-width: thin` carves ~11px off the right side only, so the
centered column reads 32px left vs 43px right (MUL-4404). Mirroring
the gutter restores symmetry; overlay-scrollbar platforms reserve
nothing and render unchanged. */}
<div
ref={setScrollContainerEl}
data-tab-scroll-root
className="relative flex-1 overflow-y-auto"
className="relative flex-1 overflow-y-auto [scrollbar-gutter:stable_both-edges]"
>
<div className="mx-auto w-full max-w-4xl px-8 py-8">
<TitleEditor