waywardinn/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix mobile overflow on the homepage #4

Merged
TheDarkWizard merged 1 commit from fix/mobile-overflow into main 2026-06-30 19:44:10 +00:00
Conversation 0 Commits 1 Files changed 1 +31 -14
TheDarkWizard commented 2026-06-30 19:38:09 +00:00
Owner
Copy link

Fixes several mobile layout issues reported from a phone screenshot.

Root cause of the service-grid overflow: the @media (max-width:560px) block was defined before the base .service-row { grid-template-columns: repeat(5, 1fr) } rule. With equal specificity the later base rule won even on phones, so the mobile reflow never applied — the 5-column grid forced all tiles to min-content width and clipped the service labels. Moved the responsive override to the end of the file so it wins, and switched to auto-fill, minmax(76px, 1fr) so tiles reflow into as many columns as comfortably fit.

Also in this change:

  • Title: clamp(1.55rem, 8.5vw, 2.2rem) + overflow-wrap: break-word so waywardinn.com scales down and can't run off-screen.
  • Uptime Kuma status icon: shrunk from 0.8rem to 0.7rem (it looked oversized on mobile).
  • Element Desktop downloads intro: removed white-space: nowrap / flex-shrink: 0 so the line wraps instead of forcing horizontal overflow.
Fixes several mobile layout issues reported from a phone screenshot. **Root cause of the service-grid overflow:** the `@media (max-width:560px)` block was defined *before* the base `.service-row { grid-template-columns: repeat(5, 1fr) }` rule. With equal specificity the later base rule won even on phones, so the mobile reflow never applied — the 5-column grid forced all tiles to min-content width and clipped the service labels. Moved the responsive override to the end of the file so it wins, and switched to `auto-fill, minmax(76px, 1fr)` so tiles reflow into as many columns as comfortably fit. Also in this change: - **Title:** `clamp(1.55rem, 8.5vw, 2.2rem)` + `overflow-wrap: break-word` so `waywardinn.com` scales down and can't run off-screen. - **Uptime Kuma status icon:** shrunk from `0.8rem` to `0.7rem` (it looked oversized on mobile). - **Element Desktop downloads intro:** removed `white-space: nowrap` / `flex-shrink: 0` so the line wraps instead of forcing horizontal overflow.
The mobile @media block sat before the base .service-row rule, so the
5-column grid overrode the mobile reflow on phones, clipping service
labels. Move the responsive override after the base rule and reflow
tiles with auto-fill/minmax. Also: clamp the site title so it can't run
off-screen, shrink the Uptime Kuma status icon, and let the Element
Desktop downloads intro wrap instead of forcing horizontal overflow.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
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
waywardinn/homepage!4
No description provided.