From 8e40e2edcc7c9ce75ae0c033471cd2fc67e5c495 Mon Sep 17 00:00:00 2001
From: Nancy <nancymxgao@gmail.com>
Date: Sun, 26 Jul 2026 23:54:16 +1000
Subject: [PATCH] fix: remove homepage segmented control scrollbars (#3267)

Co-authored-by: Nancy <nancymxgao@gmail.com>
---
 e2e/home-workflows.pw.test.ts | 31 +++++++++++++++++++++++++++++++
 src/design-system.css         |  4 ++++
 2 files changed, 35 insertions(+)

diff --git a/e2e/home-workflows.pw.test.ts b/e2e/home-workflows.pw.test.ts
index d59f4b68..40f3c821 100644
--- a/e2e/home-workflows.pw.test.ts
+++ b/e2e/home-workflows.pw.test.ts
@@ -1,6 +1,37 @@
 import { expect, test } from "@playwright/test";
 import { expectHealthyPage, trackRuntimeErrors, waitForHydration } from "./helpers/runtimeErrors";
 
+test("home segmented controls stay within their fixed tracks", async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await waitForHydration(page);
+
+  for (const name of ["Content type", "Layout"]) {
+    const group = page.getByRole("group", { name });
+    await expect(group).toBeVisible();
+    const firstButton = group.getByRole("button").first();
+    await firstButton.focus();
+    await expect(firstButton).toBeFocused();
+
+    const metrics = await group.evaluate((element) => {
+      const style = window.getComputedStyle(element);
+      return {
+        overflowX: style.overflowX,
+        overflowY: style.overflowY,
+        contentFits:
+          element.scrollHeight <= element.clientHeight &&
+          element.scrollWidth <= element.clientWidth,
+        buttonHeights: [...element.children].map((child) => child.getBoundingClientRect().height),
+      };
+    });
+
+    expect(metrics.overflowX).toBe("visible");
+    expect(metrics.overflowY).toBe("visible");
+    expect(metrics.contentFits).toBe(true);
+    expect(metrics.buttonHeights.every((height) => height <= 30)).toBe(true);
+  }
+});
+
 test("home search and browse entry points work", async ({ page }) => {
   const errors = trackRuntimeErrors(page);
 
diff --git a/src/design-system.css b/src/design-system.css
index 04ce35f0..9457eb39 100644
--- a/src/design-system.css
+++ b/src/design-system.css
@@ -102,12 +102,16 @@
 }
 
 .home-v2-main .oc-segmented {
+  /* Toolbar segments are fixed-size controls, not horizontal scrollers. */
+  overflow: visible;
   border-color: var(--oc-border-subtle);
   border-radius: var(--oc-radius-control);
   background: var(--oc-surface-card);
 }
 
 .home-v2-main .oc-segmented-item {
+  /* Keep the shared 2rem minimum from overflowing the 30px toolbar track. */
+  min-height: var(--clawhub-segmented-seg-h);
   border-radius: var(--oc-radius-inset);
 }