mirror of
https://github.com/block/buzz.git
synced 2026-10-27 04:30:52 +00:00
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:
@@ -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
|
||||
|
||||
@@ -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 =
|
||||
|
||||
Reference in New Issue
Block a user