From 358938f9de2036e42664a110c565d94e8037d491 Mon Sep 17 00:00:00 2001
From: Brad Hallett <53977268+bradhallett@users.noreply.github.com>
Date: Tue, 28 Jul 2026 20:09:52 -0400
Subject: [PATCH] fix(desktop): paint full-height community rail to close
traffic-light gaps
PR #2972 moved the community rail's traffic-light clearance from padding inside the painted element to margins outside it. CSS margins are transparent, so the parent's --background showed through beside the --sidebar-painted rail: a ~56x41px gap at the top (traffic-light band) and ~56x8px at the bottom. The mismatch was visible in every dark theme.
Wrap the rail in a full-height bg-sidebar surface that owns the width, z-index, and flex column; the inner
+
);
}
diff --git a/desktop/tests/e2e/community-rail.spec.ts b/desktop/tests/e2e/community-rail.spec.ts
index 68c12f69df..bbe2a1f367 100644
--- a/desktop/tests/e2e/community-rail.spec.ts
+++ b/desktop/tests/e2e/community-rail.spec.ts
@@ -648,6 +648,7 @@ test.describe("community rail", () => {
// Spoof macOS so the rail applies its traffic-light top inset.
await page.addInitScript(() => {
Object.defineProperty(navigator, "platform", { get: () => "MacIntel" });
+ window.localStorage.setItem("buzz-theme", "dracula");
});
await installMockBridge(page, undefined, { skipCommunitySeed: true });
await seedCommunities(page, [COMMUNITY_A, COMMUNITY_B], COMMUNITY_A.id);
@@ -661,6 +662,12 @@ test.describe("community rail", () => {
await expect(firstButton).toBeVisible();
const buttonBox = await firstButton.boundingBox();
const railBox = await page.getByTestId("community-rail").boundingBox();
+ const railSurfaceBox = await page
+ .getByTestId("community-rail-surface")
+ .boundingBox();
+ const appSurfaceBox = await page
+ .locator(".buzz-huddle-app-surface")
+ .boundingBox();
const searchBox = await page.getByTestId("open-search").boundingBox();
const contentBox = await page
.locator("[data-buzz-content-surface]")
@@ -670,10 +677,58 @@ test.describe("community rail", () => {
expect(railBox).not.toBeNull();
expect(searchBox).not.toBeNull();
expect(contentBox).not.toBeNull();
+ expect(railSurfaceBox).not.toBeNull();
+ expect(appSurfaceBox).not.toBeNull();
expect(buttonBox?.y ?? 0).toBeGreaterThanOrEqual(32);
expect(Math.abs((railBox?.y ?? 0) - (contentBox?.y ?? 0))).toBeLessThan(
0.5,
);
+ expect(
+ Math.abs((railSurfaceBox?.y ?? 0) - (appSurfaceBox?.y ?? 0)),
+ ).toBeLessThan(0.5);
+ expect(
+ Math.abs(
+ (railSurfaceBox?.y ?? 0) +
+ (railSurfaceBox?.height ?? 0) -
+ ((appSurfaceBox?.y ?? 0) + (appSurfaceBox?.height ?? 0)),
+ ),
+ ).toBeLessThan(0.5);
+
+ const gapPaint = await page.evaluate(() => {
+ const surface = document.querySelector(
+ '[data-testid="community-rail-surface"]',
+ );
+ const rail = document.querySelector(
+ '[data-testid="community-rail"]',
+ );
+ if (!surface || !rail) throw new Error("community rail is missing");
+
+ const surfaceBox = surface.getBoundingClientRect();
+ const railBox = rail.getBoundingClientRect();
+ const x = surfaceBox.left + surfaceBox.width / 2;
+ const bottomGapElement = document.elementFromPoint(
+ x,
+ railBox.bottom + (surfaceBox.bottom - railBox.bottom) / 2,
+ );
+ const topGapElement = document.elementFromPoint(
+ x,
+ surfaceBox.top + (railBox.top - surfaceBox.top) / 2,
+ );
+
+ return {
+ backgroundColor: getComputedStyle(surface).backgroundColor,
+ bottomOwned:
+ bottomGapElement?.closest(
+ '[data-testid="community-rail-surface"]',
+ ) === surface,
+ topOwned:
+ topGapElement?.closest('[data-testid="community-rail-surface"]') ===
+ surface,
+ };
+ });
+ expect(gapPaint.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+ expect(gapPaint.topOwned).toBe(true);
+ expect(gapPaint.bottomOwned).toBe(true);
const leftInset = (buttonBox?.x ?? 0) - (railBox?.x ?? 0);
const rightInset =