27 lines
1.6 KiB
Markdown
27 lines
1.6 KiB
Markdown
# 2026-03-01 Session Notes
|
|
|
|
## Mobile Optimization Plan — signetai/web
|
|
|
|
Session initiated with a comprehensive mobile optimization plan for the signetai marketing website. The plan focuses on CSS-only changes to improve mobile UX without component restructuring. The website already has responsive breakpoints at 720px, 760px, 820px, 900px, and 1080px.
|
|
|
|
## Key Changes Identified
|
|
|
|
Seven CSS-focused improvements:
|
|
|
|
1. **Touch target enforcement** — Bump interactive elements to 44px minimum (nav theme button, docs mobile trigger, install tabs, quickstart copy button)
|
|
2. **Font floor enforcement** — Enforce 11px minimum at 720px breakpoint (labels, nav button, section indices, footer elements)
|
|
3. **Hero meta grid stacking** — Convert 2-column grid to single column on mobile
|
|
4. **Section padding reduction** — Cap vertical padding at 48px on mobile (from clamp formula)
|
|
5. **ASCII art overflow protection** — Add overflow containment to `<pre>` elements
|
|
6. **Arch item grid stacking** — Stack grid to single column at 720px
|
|
7. **Comparison table scroll indicator** — Add gradient fade hint on right edge for horizontal scroll
|
|
|
|
## Files Modified
|
|
|
|
- `src/styles/global.css` — touch targets, font floors, arch grid stacking
|
|
- `src/styles/landing.css` — hero grid, section padding, ASCII overflow, comparison hint
|
|
- `src/styles/docs.css` — mobile trigger sizing, font floors
|
|
|
|
## Verification Strategy
|
|
|
|
Testing via devtools responsive mode at 375px (iPhone SE), 390px (iPhone 14), 768px (iPad). Validation includes no horizontal overflow, minimum 44px touch areas, readable font sizes, and functional hamburger menu/sheets. |