Co-authored-by: Wintermute <165f0c871dd2586bb18b6aa109eeaf57bb2132ff4d27b10120f4368a0f627022@buzz.block.builderlab.xyz>
---
desktop/playwright.config.ts | 1 +
desktop/src/shared/ui/sidebar.tsx | 6 +-
.../tests/e2e/sidebar-offcanvas-rail.spec.ts | 77 +++++++++++++++++++
3 files changed, 81 insertions(+), 3 deletions(-)
create mode 100644 desktop/tests/e2e/sidebar-offcanvas-rail.spec.ts
diff --git a/desktop/playwright.config.ts b/desktop/playwright.config.ts
index 131657cbb..7d06c4da9 100644
--- a/desktop/playwright.config.ts
+++ b/desktop/playwright.config.ts
@@ -20,6 +20,7 @@ export default defineConfig({
name: "smoke",
testMatch: [
"**/smoke.spec.ts",
+ "**/sidebar-offcanvas-rail.spec.ts",
"**/search-scope-screenshots.spec.ts",
"**/onboarding-docked-cta-screenshots.spec.ts",
"**/identity-key-help.spec.ts",
diff --git a/desktop/src/shared/ui/sidebar.tsx b/desktop/src/shared/ui/sidebar.tsx
index 10745e696..41db47b15 100644
--- a/desktop/src/shared/ui/sidebar.tsx
+++ b/desktop/src/shared/ui/sidebar.tsx
@@ -351,7 +351,7 @@ const Sidebar = React.forwardRef<
data-variant={variant}
data-side={side}
>
- {/* This is what handles the sidebar gap on desktop */}
+ {/* Sidebar gap on desktop; the offcanvas sibling below also goes invisible, else it paints over the community rail past the overflow-visible shell. */}
{
+ window.localStorage.setItem(key, value);
+ },
+ { key: THEME_STORAGE_KEY, value: theme },
+ );
+ await installMockBridge(page, undefined, { skipCommunitySeed: true });
+ await page.addInitScript(
+ ({ list, active }) => {
+ window.localStorage.setItem("buzz-communities", JSON.stringify(list));
+ window.localStorage.setItem("buzz-active-community-id", active);
+ },
+ { list: [COMMUNITY_A, COMMUNITY_B], active: COMMUNITY_A.id },
+ );
+ await page.goto("/", { waitUntil: "domcontentloaded" });
+ await expect(page.getByTestId("community-rail")).toBeVisible();
+ await expect(page.getByTestId("app-sidebar")).toBeVisible();
+}
+
+/**
+ * Regression: the app-sidebar layer is overflow-visible (huddle drawer), so
+ * the offcanvas-collapsed sidebar slides out of its container but kept
+ * painting over the community rail — opaquely on flat themes, as ghost
+ * fragments on the transparent Buzz chrome. The collapsed sidebar must be
+ * invisible and non-interactive, leaving the rail clean in every theme.
+ */
+for (const theme of ["buzz", "buzz-dark", "vesper"]) {
+ test(`collapsed sidebar leaves the community rail clean — ${theme}`, async ({
+ page,
+ }) => {
+ await setup(page, theme);
+ await page.screenshot({ path: `${SHOTS}/${theme}-expanded.png` });
+
+ await page.locator('[data-sidebar="trigger"]').first().click();
+ const shell = page.locator(
+ '[data-state="collapsed"][data-collapsible="offcanvas"]',
+ );
+ await expect(shell).toHaveCount(1);
+ // Let the 200ms slide finish; visibility flips at the transition's end.
+ await page.waitForTimeout(500);
+
+ // Second direct child = the sliding sidebar container (first is the gap).
+ const offscreenSidebar = shell.locator("> div").nth(1);
+ await expect(offscreenSidebar).toHaveCSS("visibility", "hidden");
+ await expect(offscreenSidebar).toHaveCSS("pointer-events", "none");
+
+ // The community rail stays visible and interactive beneath it.
+ await expect(page.getByTestId("community-rail")).toBeVisible();
+ await expect(
+ page.getByTestId(`community-rail-button-${COMMUNITY_B.id}`),
+ ).toBeVisible();
+ await page.screenshot({ path: `${SHOTS}/${theme}-collapsed.png` });
+ });
+}