From 138b5d0950c59e5e1857d34f46407f431e516263 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Tue, 25 Aug 2026 17:30:34 +0530 Subject: [PATCH] fix(ui): prevent full bleed hero overflow --- packages/ui/components/Hero.wrn | 14 +++----------- packages/ui/test/ui-redesign-contract.test.ts | 7 +++++++ 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/ui/components/Hero.wrn b/packages/ui/components/Hero.wrn index cb48f9eb..b7b3416f 100644 --- a/packages/ui/components/Hero.wrn +++ b/packages/ui/components/Hero.wrn @@ -280,22 +280,14 @@ component Hero { } .wrn-hero[data-full-bleed="true"] { - width: 100vw; - max-width: 100vw; - margin-inline: calc(50% - 50vw); + width: 100%; + max-width: 100%; + margin-inline: 0; border-right-width: 0; border-left-width: 0; border-radius: 0; } - @supports (width: 100dvw) { - .wrn-hero[data-full-bleed="true"] { - width: 100dvw; - max-width: 100dvw; - margin-inline: calc(50% - 50dvw); - } - } - .wrn-hero[data-color="secondary"] { --wrn-hero-accent: var(--wrn-color-secondary); --wrn-hero-accent-soft: var(--wrn-color-secondary-soft, var(--wrn-color-primary-soft)); diff --git a/packages/ui/test/ui-redesign-contract.test.ts b/packages/ui/test/ui-redesign-contract.test.ts index 85ce023d..00531a2c 100644 --- a/packages/ui/test/ui-redesign-contract.test.ts +++ b/packages/ui/test/ui-redesign-contract.test.ts @@ -78,6 +78,13 @@ function openingTags(source: string): string[] { } describe("@wrnexus/ui redesign component pack", () => { + test("Hero full bleed does not use scrollbar-sensitive viewport units", async () => { + const source = await readFile(join(componentsDir, "Hero.wrn"), "utf8"); + expect(source).not.toContain("width: 100vw"); + expect(source).not.toContain("width: 100dvw"); + expect(source).toContain('.wrn-hero[data-full-bleed="true"]'); + }); + test("contains every replacement and new component", async () => { const files = new Set(await readdir(componentsDir));