Skip to content

Fix: keep the demo widget frame inside its card border - #17

Merged
SandObserver merged 1 commit into
mainfrom
fix/demo-widget-frame-inset
Aug 26, 2026
Merged

SandObserver merged 1 commit into
mainfrom
fix/demo-widget-frame-inset

Conversation

@SandObserver

Copy link
Copy Markdown
Owner

Summary

  • Scale the glass widget frame in the phone demo from its own card's client width instead of the neighbouring borderless card, so the 1px border no longer pushes the frame past the padding box.
  • Set a dedicated --nps scale on the demo screen and fall back to --ws when it is absent.

Testing
npm run build and npm run check both pass. Verified in Chrome at 393px: the frame's right and bottom edges now sit inside the card, and the card reports no scroll overflow.

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.

@SandObserver SandObserver added the ui/ux UI, UX, and accessibility only fix label Aug 26, 2026
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying stackyard-docs with  Cloudflare Pages  Cloudflare Pages

Latest commit: 5ebe779
Status: ✅  Deploy successful!
Preview URL: https://f14ca879.stackyard-docs.pages.dev
Branch Preview URL: https://fix-demo-widget-frame-inset.stackyard-docs.pages.dev

View logs

@SandObserver
SandObserver merged commit 72740a2 into main Aug 26, 2026
2 checks passed
@SandObserver
SandObserver deleted the fix/demo-widget-frame-inset branch August 26, 2026 17:27
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