DangerousThings/dt-design-system
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): .badge displays as inline-block so wrapped labels keep their shape

Browse Source 
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 <this-sha>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
michael
2026-07-12 16:03:29 -07:00
parent e33bf70896
commit 2d49471ebb
1 changed files with 3 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/web/src/components/bevels.css
View File

@@ -226,6 +226,9 @@
[data-brand="dt"] .badge { [data-brand="dt"] .badge {
--badge-border-color: var(--color-border); --badge-border-color: var(--color-border);
--badge-fill: var(--color-surface); --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; position: relative;
isolation: isolate; isolation: isolate;
background: var(--badge-border-color); background: var(--badge-border-color);