From 5de5b60660a5b5707e3d6108061dc99f10099e72 Mon Sep 17 00:00:00 2001
From: Greyson Parrelli <greyson@signal.org>
Date: Sun, 26 Jul 2026 22:03:07 -0400
Subject: [PATCH] Keep the phone topbar on one row, and tighten card corners.

- Force the topbar to a single row and let long player names truncate with an
  ellipsis, so the three-dot menu no longer wraps to a second line.
- Drop the card's outer corner radius from 14px to 9px so it matches the
  scene/panel boxes inside (7-8px) instead of dwarfing them.
---
 web/src/styles.css       | 32 +++++++++++++++++++++++++-------
 web/tsconfig.tsbuildinfo |  2 +-
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/web/src/styles.css b/web/src/styles.css
index 35ae1c9..491dbc3 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -42,7 +42,9 @@
 
   --font-display: 'Lilita One', system-ui, sans-serif;
   --font-body: 'Nunito', system-ui, sans-serif;
-  --card-radius: 14px;
+  /* The card's outer corners echo the smaller radii of the scene/panel boxes
+     inside (7–8px) rather than towering over them. */
+  --card-radius: 9px;
 
   /* Reusable warm shadows so depth stays consistent everywhere. */
   --shadow-card: 0 10px 20px -6px rgba(20, 12, 4, 0.55), 0 2px 4px rgba(20, 12, 4, 0.4);
@@ -2927,10 +2929,12 @@ h3 {
     -webkit-overflow-scrolling: touch;
   }
 
-  /* --- topbar: a slim rail --- */
+  /* --- topbar: a slim rail, forced onto one row --- */
   .topbar {
     gap: 5px 8px;
     padding: 5px 9px;
+    /* Never wrap the ⋯ menu onto a second line — long names truncate instead. */
+    flex-wrap: nowrap;
   }
   /* Drop the wordmark entirely on a phone — the die, the player tags, and the
      ⋯ menu are all that's needed, and losing it helps the rail stay one row. */
@@ -2941,21 +2945,35 @@ h3 {
     width: 23px;
     height: 23px;
   }
-  /* Let the tags pack tight; the ⋯ menu is pushed to the right by margin-auto. */
+  /* Players take the middle and shrink; the die and ⋯ menu stay fixed. */
+  .topbar-round {
+    flex: 0 0 auto;
+  }
   .topbar-players {
-    flex: 0 1 auto;
+    flex: 1 1 auto;
+    min-width: 0;
     gap: 6px;
+    flex-wrap: nowrap;
+  }
+  .topbar-menu {
+    flex: 0 0 auto;
+    margin-left: 4px;
   }
   .topbar-menu-btn {
     padding: 4px 10px;
   }
-  .topbar-round {
-    font-size: 0.82rem;
-  }
+  /* Tags shrink and their names ellipsis so two players + the menu fit one row. */
   .topbar-player {
     padding: 3px 9px;
     font-size: 0.8rem;
     gap: 5px;
+    min-width: 0;
+  }
+  .topbar-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
   }
   .topbar-code {
     font-size: 0.8rem;
diff --git a/web/tsconfig.tsbuildinfo b/web/tsconfig.tsbuildinfo
index dfc463b..b4fd1f2 100644
--- a/web/tsconfig.tsbuildinfo
+++ b/web/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/anim.ts","./src/api.ts","./src/main.tsx","./src/petArt.ts","./src/types.ts","./src/useBattleSpeed.ts","./src/useCatalog.ts","./src/useGame.ts","./src/vite-env.d.ts","./src/components/ArrangePhase.tsx","./src/components/BattlePhase.tsx","./src/components/CardView.tsx","./src/components/DebugPanel.tsx","./src/components/DiceRoll.tsx","./src/components/EventLog.tsx","./src/components/GameOver.tsx","./src/components/Home.tsx","./src/components/Lobby.tsx","./src/components/ShopPhase.tsx","./src/components/Table.tsx"],"version":"5.9.3"}
\ No newline at end of file
+{"root":["./src/App.tsx","./src/anim.ts","./src/api.ts","./src/main.tsx","./src/petArt.ts","./src/types.ts","./src/useBattleSpeed.ts","./src/useCatalog.ts","./src/useGame.ts","./src/useMediaQuery.ts","./src/vite-env.d.ts","./src/components/ArrangePhase.tsx","./src/components/BattlePhase.tsx","./src/components/CardView.tsx","./src/components/DebugPanel.tsx","./src/components/DiceRoll.tsx","./src/components/EventLog.tsx","./src/components/GameOver.tsx","./src/components/Home.tsx","./src/components/Lobby.tsx","./src/components/ShopPhase.tsx","./src/components/Table.tsx"],"version":"5.9.3"}
\ No newline at end of file