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(