From 99e93227f5fcf564d9ced1da3194a76eceae3d91 Mon Sep 17 00:00:00 2001
From: strandedturtle <strandedtourtle@gmail.com>
Date: Wed, 8 Jul 2026 08:11:10 +0000
Subject: [PATCH] Fix squished Update button + line-shaped spinner on mobile

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
---
 client/src/styles/app.css | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/client/src/styles/app.css b/client/src/styles/app.css
index ee3be00..64bd339 100644
--- a/client/src/styles/app.css
+++ b/client/src/styles/app.css
@@ -65,6 +65,7 @@ a {
 
 .spinner {
   display: inline-block;
+  flex-shrink: 0;
   width: 1.25em;
   height: 1.25em;
   border: 2px solid currentColor;
@@ -590,6 +591,25 @@ a {
   flex: 1;
 }
 
+/* Below 480px, don't let the links row and the action button fight over
+   horizontal space (that's what squeezed "Updating…" + its spinner into a
+   sliver). Stack them: links wrap on their own full-width line, the button
+   gets a full-width line to itself with room for its label + spinner. */
+@media (max-width: 479.98px) {
+  .card-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .card-actions-left {
+    width: 100%;
+  }
+
+  .update-btn {
+    width: 100%;
+  }
+}
+
 @media (min-width: 480px) {
   .update-btn {
     flex: 0 0 auto;