{"version":"2.1.299","anchor":"mockuphtml-page-prompts-safe-area-gutters-and-viewport-fit","canonical_anchor":"mockuphtml-page-prompts-safe-area-gutters-and-viewport-fit","heading":"Generated mockup pages keep their side padding clear of phone notches","tier":"notice","area":"Artifacts","scope":"individual","heads_up":false,"url":"https:\/\/changelogs.core-directive.com\/v\/2.1.299\/e\/mockuphtml-page-prompts-safe-area-gutters-and-viewport-fit","release_url":"https:\/\/changelogs.core-directive.com\/v\/2.1.299","markdown":"### Generated mockup pages keep their side padding clear of phone notches\n\nMockups and HTML pages Claude builds now set side padding of at least 16px that grows to clear phone screen edges and notches\n\n**What**\n\nWhen Claude builds a mockup or HTML page, its instructions now require the side margins to be at least 16px. The margins also grow to the phone's \"safe area\", the part of the screen not covered by notches, rounded corners or system bars. Before, only plain side padding was asked for. The page template also adds a `claude:viewport-fit-sides` meta tag.\n\n**Why**\n\nPages Claude generates should display better on phones turned sideways or with bars along the edges, without content hidden behind them.\n\n- Area: Artifacts\n- Tier: You'll notice\n- Useful: 2\/5\n- Signal: 2\/5\n- Scope: individual\n- Heads-up: no"}