From 2d49471ebb10f839601d66d2725ccc5df4749d58 Mon Sep 17 00:00:00 2001 From: michael Date: Sun, 12 Jul 2026 16:03:29 -0700 Subject: [PATCH] fix(web): .badge displays as inline-block so wrapped labels keep their shape As a plain inline span, a badge that wraps to two lines fragments into per-line boxes: the clip-path and ::before fill cover the wrong region, so overflow text renders bare outside the beveled shape (storefront DTLabel ribbons at <=375px viewports). inline-block keeps the badge one box; the bevel and fill wrap all lines. Revert with: git revert Co-Authored-By: Claude Fable 5 --- packages/web/src/components/bevels.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/web/src/components/bevels.css b/packages/web/src/components/bevels.css index 8890744..22e91e9 100644 --- a/packages/web/src/components/bevels.css +++ b/packages/web/src/components/bevels.css @@ -226,6 +226,9 @@ [data-brand="dt"] .badge { --badge-border-color: var(--color-border); --badge-fill: var(--color-surface); + /* inline-block so a wrapping badge stays one box — clip-path and the + ::before fill fragment across line boxes on a plain inline span */ + display: inline-block; position: relative; isolation: isolate; background: var(--badge-border-color);