Fix squished Update button + line-shaped spinner on mobile#41
Merged
Conversation
Two compounding bugs, visible once cards gained a third card-actions-left item (Revert): - .spinner had no flex-shrink:0, so a squeezed flex button shrank its width but not height, flattening the circle into a thin line. Fix it globally (10 usages across the app) rather than per-instance. - .card-actions let the links row (Changelog / What's changed / Revert) and the Update/Updating button fight over one line's width instead of wrapping, crushing the button's label + spinner together. Below 480px, stack card-actions into two full-width lines instead: the links row wraps on its own, the button gets full width with room to render. The existing >=480px side-by-side layout is untouched. Verified by rendering the built CSS in the reported (long revert label, busy spinner) state at 320/390/600px viewports. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013Lj6nYJQDtLaZFvvEQJGM4
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes the mobile bug where the Update button gets squished during an update and its spinner collapses into a thin line.
Root cause (two compounding bugs, surfaced once cards gained a third
card-actions-leftitem — Revert):.spinnerhad noflex-shrink: 0— inside a squeezed flex button, the browser shrinks the spinner's width but not height, flattening the circle into a line. Fixed globally (it's used in 10 places across the app), not just this one spot..card-actionslet the links row (Changelog / What's changed / Revert) and the Update/Updating button fight over one line's width instead of wrapping, crushing the button's label + spinner together.Fix: below 480px,
.card-actionsstacks into two full-width lines — the links row wraps on its own, the button gets a full line with room to render. The existing ≥480px side-by-side layout is untouched (verified).Verification: rendered the actual built CSS in the reported state (long "Revert to java25" label + busy spinner) at 320px / 390px / 600px viewports via a static repro — confirmed fixed at 320/390, confirmed desktop layout unchanged at 600. Full server test suite green (111/111); client build clean.
🤖 Generated with Claude Code
Generated by Claude Code