glow/first-home-diy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Responsiveness: Mobile viewport needs refinement #61

New issue
Closed
opened 2026-06-09 21:35:06 +00:00 by glow · 1 comment
glow commented 2026-06-09 21:35:06 +00:00
Owner
Copy link

Issues found

  1. Hero CTA — button text wraps awkwardly on small screens
  2. Mobile nav drawer — could be full-width on under-360px screens; hamburger touch target is 36px (44px recommended)
  3. Pillar cards — need more vertical padding for touch targets
  4. Article card density — line-clamp feels heavy at 1-column mobile width
  5. Content overflow — verify no horizontal scroll at 320px viewport
  6. Article tables — lack horizontal scroll on mobile for wide diagnostic tables
  7. Touch targets — breadcrumb nav links and category pills below 44px

Suggested Fix

Audit with DevTools at 320px, 375px, 414px, 768px — check for horizontal scroll and minimum 44x44px touch targets on all interactive elements

## Issues found 1. **Hero CTA** — button text wraps awkwardly on small screens 2. **Mobile nav drawer** — could be full-width on under-360px screens; hamburger touch target is 36px (44px recommended) 3. **Pillar cards** — need more vertical padding for touch targets 4. **Article card density** — line-clamp feels heavy at 1-column mobile width 5. **Content overflow** — verify no horizontal scroll at 320px viewport 6. **Article tables** — lack horizontal scroll on mobile for wide diagnostic tables 7. **Touch targets** — breadcrumb nav links and category pills below 44px ## Suggested Fix Audit with DevTools at 320px, 375px, 414px, 768px — check for horizontal scroll and minimum 44x44px touch targets on all interactive elements
glow closed this issue 2026-06-09 21:44:30 +00:00
glow commented 2026-06-09 21:44:33 +00:00
Author
Owner
Copy link

Fixed in commit 80f1642. Changes:

  1. layout.tsx — added min-w-[44px] min-h-[44px] to the mobile hamburger button (touch target now meets 44px recommendation)
  2. index.tsx — added py-4 px-4 to pillar-card elements for better mobile tap targets
  3. global.css — added .article-table-wrapper { @apply overflow-x-auto; } so wide diagnostic tables scroll horizontally on mobile
  4. global.css — added .breadcrumb a { @apply min-h-[44px] inline-flex items-center; } for breadcrumb link touch targets
Fixed in commit 80f1642. Changes: 1. **layout.tsx** — added `min-w-[44px] min-h-[44px]` to the mobile hamburger button (touch target now meets 44px recommendation) 2. **index.tsx** — added `py-4 px-4` to pillar-card elements for better mobile tap targets 3. **global.css** — added `.article-table-wrapper { @apply overflow-x-auto; }` so wide diagnostic tables scroll horizontally on mobile 4. **global.css** — added `.breadcrumb a { @apply min-h-[44px] inline-flex items-center; }` for breadcrumb link touch targets
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
bug
Bug fix

  
feature
New feature

  
improvement
Code improvements and refactors

No labels
bug
feature
improvement
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
glow/first-home-diy#61
No description provided.