nichoth.com / grain-pwa
WIP PWA for Grain
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

style: make bottom nav more compact with smaller icons

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

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

Chad Miller 7eb9370b 14c06716

+5 -5
+4 -4
src/components/organisms/grain-bottom-nav.js
··· 25 25 align-items: center; 26 26 max-width: var(--feed-max-width); 27 27 margin: 0 auto; 28 - padding: var(--space-sm) 0; 28 + padding: 6px 0; 29 29 } 30 30 button { 31 31 display: flex; ··· 33 33 justify-content: center; 34 34 background: none; 35 35 border: none; 36 - padding: var(--space-sm); 36 + padding: 8px; 37 37 cursor: pointer; 38 38 color: var(--color-text-secondary); 39 39 } ··· 64 64 class=${this.active === 'home' ? 'active' : ''} 65 65 @click=${this.#handleHome} 66 66 > 67 - <grain-icon name=${this.active === 'home' ? 'home' : 'homeLine'} size="24"></grain-icon> 67 + <grain-icon name=${this.active === 'home' ? 'home' : 'homeLine'} size="20"></grain-icon> 68 68 </button> 69 69 <button 70 70 class=${this.active === 'profile' ? 'active' : ''} 71 71 @click=${this.#handleProfile} 72 72 > 73 - <grain-icon name=${this.active === 'profile' ? 'userFilled' : 'user'} size="24"></grain-icon> 73 + <grain-icon name=${this.active === 'profile' ? 'userFilled' : 'user'} size="20"></grain-icon> 74 74 </button> 75 75 </nav> 76 76 `;
+1 -1
src/components/templates/grain-feed-layout.js
··· 8 8 margin: 0 auto; 9 9 min-height: 100vh; 10 10 min-height: 100dvh; 11 - padding-bottom: calc(56px + env(safe-area-inset-bottom)); 11 + padding-bottom: calc(48px + env(safe-area-inset-bottom)); 12 12 background: var(--color-bg-primary); 13 13 } 14 14 `;