fix(ui): keep the sheet scrollbar off the right-aligned labels

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.

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(

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,
           )}
         >