Skip to content

Fix: keep the feature badges styled on phones - #16

Merged
SandObserver merged 1 commit into
mainfrom
fix/phone-badge-scope
Aug 25, 2026
Merged

SandObserver merged 1 commit into
mainfrom
fix/phone-badge-scope

Conversation

@SandObserver

Copy link
Copy Markdown
Owner

Summary

  • Scope the phone home-screen rules to .screen-inner, so .badge outside the demo keeps its own sizing.
  • Without the scope, the badges in the badge feature section resolved --sc to nothing below 768px, dropping their size, radius, font size and corner offset, and leaving them square in the top-left of their anchor.

Testing
All green: npm run build and npm run check both pass. Verified in Chrome at 320, 390, 601 and 1280px: the feature badges are back to 20px with a -7px corner offset, and the demo badges still scale with the phone grid.

Checklist

  • npm run build and npm run check both pass.
  • Product UI is shown by running or capturing it, never recreated in CSS.
  • Any new preview or screenshot carries no private hostnames or real data.
  • Visual changes verified in both colour schemes and both docs themes.
  • Links to the app repo still resolve.

The phone rules sized .badge from --sc, which only the demo screen defines.
The badges in the badge feature resolved it to nothing and lost their size,
radius and corner offset. Scope every phone rule to the demo screen.
@SandObserver SandObserver added the ui/ux UI, UX, and accessibility only fix label Aug 25, 2026
@SandObserver
SandObserver merged commit 0415073 into main Aug 25, 2026
1 check passed
@SandObserver
SandObserver deleted the fix/phone-badge-scope branch August 25, 2026 21:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ui/ux UI, UX, and accessibility only fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant