feat: make header fixed for app-like scroll behavior

WIP PWA for Grain

- Change header from sticky to fixed positioning
- Make outlet the scroll container between header and bottom nav
- Remove redundant padding from feed-layout
- Scrollbar now starts below header for PWA feel

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

chadtmiller.com 2 months ago cb310d66 ae03cec3

+14 -6

3 changed files

expand all

src

components

organisms

grain-header.js

pages

grain-app.js

templates

grain-feed-layout.js

+3 -1

src/components/organisms/grain-header.js

··· 12 12 static styles = css` 13 13 :host { 14 14 display: block; 15 - position: sticky; 15 + position: fixed; 16 16 top: 0; 17 + left: 0; 18 + right: 0; 17 19 background: var(--color-bg-primary); 18 20 border-bottom: 1px solid var(--color-border); 19 21 z-index: 100;

+10 -2

src/components/pages/grain-app.js

··· 25 25 font-family: var(--font-family); 26 26 background: var(--color-bg-primary); 27 27 color: var(--color-text-primary); 28 - min-height: 100vh; 29 - min-height: 100dvh; 28 + height: 100vh; 29 + height: 100dvh; 30 + overflow: hidden; 30 31 } 31 32 #outlet { 32 33 display: block; 34 + position: fixed; 35 + top: 48px; 36 + left: 0; 37 + right: 0; 38 + bottom: calc(48px + env(safe-area-inset-bottom, 0px)); 39 + overflow-y: auto; 40 + -webkit-overflow-scrolling: touch; 33 41 } 34 42 `; 35 43

+1 -3

src/components/templates/grain-feed-layout.js

··· 6 6 display: block; 7 7 max-width: var(--feed-max-width); 8 8 margin: 0 auto; 9 - min-height: 100vh; 10 - min-height: 100dvh; 11 - padding-bottom: calc(48px + env(safe-area-inset-bottom)); 9 + min-height: 100%; 12 10 background: var(--color-bg-primary); 13 11 } 14 12 `;