Fix iOS Safari status-icon blowup and wonky client cards #5

Merged

TheDarkWizard merged 1 commit from fix/ios-status-icon-and-cards into main

2026-06-30 21:08:05 +00:00

TheDarkWizard commented

2026-06-30 20:42:51 +00:00

Owner

Two mobile fixes from iOS Safari screenshots.

1. Uptime Kuma status icon rendered huge on iOS Safari. The .status-logo <img> had width/height: 0.7rem, which Chrome/Android honored but iOS Safari ignored — WebKit rendered the SVG at its intrinsic 640×640 size inside the flex row (a known replaced-element-in-flexbox bug). Switched the element from an <img> to a sized box with the SVG as a background-image (center / contain), the same technique already used for .mode-ico. Background images can't exceed their box, so the icon is locked to its 0.7rem footprint everywhere.

2. Client cards looked wonky / over-tall. .card-meta was a non-wrapping flex row (element.waywardinn.com · Powered by Element Web). On narrow screens the note got squeezed into a thin column and wrapped vertically, inflating card height. Added flex-wrap: wrap so the note drops to its own line cleanly.

Two mobile fixes from iOS Safari screenshots. **1. Uptime Kuma status icon rendered huge on iOS Safari.** The `.status-logo` `<img>` had `width/height: 0.7rem`, which Chrome/Android honored but iOS Safari ignored — WebKit rendered the SVG at its intrinsic 640×640 size inside the flex row (a known replaced-element-in-flexbox bug). Switched the element from an `<img>` to a sized box with the SVG as a `background-image` (`center / contain`), the same technique already used for `.mode-ico`. Background images can't exceed their box, so the icon is locked to its 0.7rem footprint everywhere. **2. Client cards looked wonky / over-tall.** `.card-meta` was a non-wrapping flex row (`element.waywardinn.com · Powered by Element Web`). On narrow screens the note got squeezed into a thin column and wrapped vertically, inflating card height. Added `flex-wrap: wrap` so the note drops to its own line cleanly.

TheDarkWizard added 1 commit

2026-06-30 20:42:51 +00:00

Fix iOS Safari status icon blowup and wonky client cards ad7cc5322b

iOS Safari ignores the CSS width/height on the Uptime Kuma status <img>
and renders the SVG at its intrinsic 640px size inside the flex row.
Render it as a background image on a sized box instead so it can't
escape its 0.7rem footprint (same approach as .mode-ico).

Also let .card-meta wrap: the 'Powered by ...' note was being squeezed
into a thin column and wrapping vertically on narrow screens, inflating
the client cards. flex-wrap drops it to its own line cleanly.

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

TheDarkWizard merged commit 858aa4187e into main

2026-06-30 21:08:05 +00:00

TheDarkWizard referenced this pull request from a commit

2026-06-30 21:08:07 +00:00

Merge pull request 'Fix iOS Safari status-icon blowup and wonky client cards' (#5) from fix/ios-status-icon-and-cards into main

TheDarkWizard referenced this pull request

2026-06-30 21:18:59 +00:00

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