{"version":"2.1.301","anchor":"published-page-prompt-painted-band-above-sticky-header","canonical_anchor":"published-page-prompt-painted-band-above-sticky-header","heading":"Mobile page instructions now cover the strip above a sticky header","tier":"notice","area":"Artifacts","scope":"individual","heads_up":false,"url":"https:\/\/changelogs.core-directive.com\/v\/2.1.301\/e\/published-page-prompt-painted-band-above-sticky-header","release_url":"https:\/\/changelogs.core-directive.com\/v\/2.1.301","markdown":"### Mobile page instructions now cover the strip above a sticky header\n\nClaude's instructions for building a phone-friendly page now say how to fill the strip above a sticky header near the phone's notch\n\n**Unclear.** Whether these page-building instructions are in use for everyone is not clear.\n\n**What**\n\nClaude Code gives the model instructions for laying out a web page that will be published and read on phones. Those instructions now add one point. A sticky header, one that stays in place while the page scrolls, should sit just below the phone's safe area, the strip at the top kept clear for the notch or status bar, using `top: env(safe-area-inset-top, 0px)`. The strip above it should be filled with the header's background colour by a fixed `body::before` element.\n\n**Why**\n\nPages Claude builds this way should no longer show a gap of the wrong colour above a sticky header on phones.\n\n- Area: Artifacts\n- Tier: You'll notice\n- Useful: 2\/5\n- Signal: 3\/5\n- Scope: individual\n- Heads-up: no"}