From 955ef6c6b670cdca18bfbd131e9ba2b52a42b037 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 8 Aug 2026 20:54:25 +0200
Subject: [PATCH] fix(ui): keep the sheet scrollbar off the right-aligned
 labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The desktop dialog body was the lone scroll port and carried no
horizontal padding of its own — the vertical scrollbar rendered flush
against its right edge, exactly where a slider's right-aligned high
anchor sits, so an overlay scrollbar painted over the last characters of
labels like the mood endpoints. Reclaim a 12 px gutter from the dialog's
own padding (-mr-3 pr-3): the scrollbar now sits beside the text, content
alignment unchanged. Universal to every ResponsiveSheet dialog.
---
 .../ui/__tests__/responsive-sheet.test.tsx         | 14 ++++++++++++++
 src/components/ui/responsive-sheet.tsx             | 11 ++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/__tests__/responsive-sheet.test.tsx b/src/components/ui/__tests__/responsive-sheet.test.tsx
index 76dc1d77a..7ba0c66c2 100644
--- a/src/components/ui/__tests__/responsive-sheet.test.tsx
+++ b/src/components/ui/__tests__/responsive-sheet.test.tsx
@@ -128,6 +128,20 @@ describe("<ResponsiveSheet>", () => {
     expect(html).not.toContain('data-slot="mock-sheet"');
   });
 
+  it("reclaims a scroll gutter on the Dialog body so the scrollbar clears right-aligned labels", () => {
+    mobile = false;
+    const html = renderToStaticMarkup(
+      <ResponsiveSheet open onOpenChange={() => {}} title="Add mood">
+        <p>body</p>
+      </ResponsiveSheet>,
+    );
+    // The body carries `-mr-3 pr-3`: a 12 px gutter reclaimed from the dialog's
+    // own padding so the vertical scrollbar lives beside the text, not on the
+    // last characters of a right-aligned slider anchor.
+    expect(html).toContain("-mr-3");
+    expect(html).toContain("pr-3");
+  });
+
   it("renders the bottom Sheet branch on narrow viewports", () => {
     mobile = true;
     const html = renderToStaticMarkup(
diff --git a/src/components/ui/responsive-sheet.tsx b/src/components/ui/responsive-sheet.tsx
index 9cb7a24a7..b9b77ca48 100644
--- a/src/components/ui/responsive-sheet.tsx
+++ b/src/components/ui/responsive-sheet.tsx
@@ -320,7 +320,16 @@ export function ResponsiveSheet({
             // Content that genuinely needs to scroll sideways (a wide table)
             // owns its own `overflow-x-auto` wrapper — that is the correct
             // place for it, and it still works inside a clipped port.
-            "flex min-h-0 flex-1 flex-col gap-4 overflow-x-clip overflow-y-auto",
+            //
+            // `-mr-3 pr-3` reclaims a 12 px scroll gutter from the dialog's own
+            // `p-6` padding: the vertical scrollbar would otherwise render flush
+            // against the body's right edge, exactly where a right-aligned child
+            // (a slider's high anchor label) sits, painting on top of the last
+            // characters. The margin gives the padding straight back, so content
+            // alignment is unchanged — the scrollbar just lives beside the text
+            // now, not on it. The mobile Sheet branch has its own `p-4` and
+            // needs nothing.
+            "-mr-3 flex min-h-0 flex-1 flex-col gap-4 overflow-x-clip overflow-y-auto pr-3",
             bodyClassName,
           )}
         >