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

Fix iOS status icon disappearing and squeezed client-card note #6

Merged
TheDarkWizard merged 1 commit from fix/ios-status-icon-v2 into main 2026-06-30 21:19:53 +00:00
Conversation 0 Commits 1 Files changed 2 +23 -6
TheDarkWizard commented 2026-06-30 21:18:59 +00:00
Owner
Copy link

Follow-up to #5, which over-corrected.

1. Status icon vanished on iOS. The background-image approach from #5 didn't paint on iOS Safari, so the Uptime Kuma icon disappeared entirely. Reverted to a real <img>, but nested inside a fixed-size block wrapper (.status-logo) with the image sized at width/height: 100%. iOS only mis-sizes an <img> that is a direct flex child (the original 640px blowup); as a child of a normal block wrapper it renders correctly and stays at 0.7rem.

2. Client-card "Powered by…" note still squeezed. flex-wrap alone didn't fix it: flex items shrink (default flex-shrink: 1) to fill leftover space before they wrap, so the note collapsed into a thin column and wrapped vertically (Powered / by / Element / Web). On mobile, .card-meta now stacks as a column with the · separator hidden, so the address and the note each get their own full-width line.

Follow-up to #5, which over-corrected. **1. Status icon vanished on iOS.** The background-image approach from #5 didn't paint on iOS Safari, so the Uptime Kuma icon disappeared entirely. Reverted to a real `<img>`, but nested inside a fixed-size block wrapper (`.status-logo`) with the image sized at `width/height: 100%`. iOS only mis-sizes an `<img>` that is a *direct* flex child (the original 640px blowup); as a child of a normal block wrapper it renders correctly and stays at 0.7rem. **2. Client-card "Powered by…" note still squeezed.** `flex-wrap` alone didn't fix it: flex items shrink (default `flex-shrink: 1`) to fill leftover space *before* they wrap, so the note collapsed into a thin column and wrapped vertically (`Powered / by / Element / Web`). On mobile, `.card-meta` now stacks as a column with the `·` separator hidden, so the address and the note each get their own full-width line.
The previous background-image approach didn't paint on iOS Safari, so
the status icon vanished. Go back to a real <img>, but nest it in a
fixed-size block wrapper and size it at 100% — iOS only mis-sizes an
<img> that is a *direct* flex child, so the wrapper sidesteps the
intrinsic-640px blowup while keeping the icon visible.

For the client cards, flex-wrap wasn't enough: flex items shrink to fill
leftover space before they wrap, so the 'Powered by…' note collapsed
into a thin, vertically-wrapping column. On mobile, stack .card-meta as
a column and hide the separator so the address and note each get a full
line.
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!6
No description provided.