fix(desktop): paint community rail full height (#3382)

## Summary

- paint the community rail across the full app height instead of
exposing the parent background through external margins
- preserve the existing community-button alignment and balanced
horizontal gutters by moving vertical spacing inside the rail
- update the rail geometry coverage to require full-height paint
ownership

## Root cause

PR #2972 aligned the rail box with the inset content by adding top and
bottom margins to the `bg-sidebar` element. Margins are outside the
painted box, so flat light and dark themes exposed a differently colored
app background above and below the rail.

## Validation

- pre-push `desktop-check`
- pre-push desktop unit suite: 3,751 passed
- `git diff --check`

Local Playwright/E2E was not run; CI owns the full browser matrix.

Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Carl <c7ebe626f000404285d3686e1dc74cc07cc60a9754a150041ba132e14bd3e2ec@buzz.block.builderlab.xyz>
This commit is contained in:
Wes
2026-07-28 14:17:01 -06:00
committed by GitHub
parent 1d4f97b959
commit 1d3b810ad7
2 changed files with 16 additions and 2 deletions

View File

@@ -370,7 +370,7 @@ export function CommunityRail({
return (
<nav
aria-label="Communities"
className="relative z-20 mb-2 mt-[calc(var(--buzz-top-chrome-height,40px)+1px)] flex w-14 shrink-0 flex-col items-center gap-2 overflow-y-auto bg-sidebar px-2.5 pb-3 pt-1.5"
className="relative z-20 flex w-14 shrink-0 flex-col items-center gap-2 overflow-y-auto bg-sidebar px-2.5 pb-5 pt-[calc(var(--buzz-top-chrome-height,40px)+7px)]"
data-testid="community-rail"
>
<DndContext

View File

@@ -662,6 +662,9 @@ test.describe("community rail", () => {
const buttonBox = await firstButton.boundingBox();
const railBox = await page.getByTestId("community-rail").boundingBox();
const searchBox = await page.getByTestId("open-search").boundingBox();
const appSurfaceBox = await page
.locator(".buzz-huddle-app-surface")
.boundingBox();
const contentBox = await page
.locator("[data-buzz-content-surface]")
.first()
@@ -669,11 +672,22 @@ test.describe("community rail", () => {
expect(buttonBox).not.toBeNull();
expect(railBox).not.toBeNull();
expect(searchBox).not.toBeNull();
expect(appSurfaceBox).not.toBeNull();
expect(contentBox).not.toBeNull();
expect(buttonBox?.y ?? 0).toBeGreaterThanOrEqual(32);
expect(Math.abs((railBox?.y ?? 0) - (contentBox?.y ?? 0))).toBeLessThan(
expect(
Math.abs((buttonBox?.y ?? 0) - (contentBox?.y ?? 0) - 6),
).toBeLessThan(0.5);
expect(Math.abs((railBox?.y ?? 0) - (appSurfaceBox?.y ?? 0))).toBeLessThan(
0.5,
);
expect(
Math.abs(
(railBox?.y ?? 0) +
(railBox?.height ?? 0) -
((appSurfaceBox?.y ?? 0) + (appSurfaceBox?.height ?? 0)),
),
).toBeLessThan(0.5);
const leftInset = (buttonBox?.x ?? 0) - (railBox?.x ?? 0);
const rightInset =