From 9a5a319cb90b8e119fefa69db17406bf3d70b867 Mon Sep 17 00:00:00 2001
From: Tim McCarthy <thoomfish@gmail.com>
Date: Fri, 10 Jul 2026 14:06:01 -0700
Subject: [PATCH] Keep player rosters vertical

---
 TODO.md                                |  2 +-
 frontend/src/assets/css/components.css |  8 ++++----
 frontend/src/assets/css/scene-play.css | 16 +++-------------
 frontend/src/lib/changelog.js          |  9 ++++++++-
 4 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/TODO.md b/TODO.md
index 776560a..7b0b6c1 100644
--- a/TODO.md
+++ b/TODO.md
@@ -2,7 +2,7 @@
 
 - [x] The character sheet modal popup is narrower than it needs to be on wide screens. I think it could safely be like 90% as wide as the non-modal UI.
 - [x] Popping out the event log should leave a close button where the "Event Log" open button is, so that you don't have to move your mouse to quickly toggle it. The existing close button can remain.
-- [ ] Use the same vertical UI for the player list in all phases
+- [x] Use the same vertical UI for the player list in all phases
 - [x] In the admin panel, if a pi-rat doesn't have a name yet, it should show something like 'not chosen yet' rather than the player name
 - [x] In the admin panel, the "Open" and "Copy" buttons should be the same size
 - [x] Store the player name in local storage and pre-populate it when joining a new game (but don't force it, let the player edit it if they'd prefer a different name)
diff --git a/frontend/src/assets/css/components.css b/frontend/src/assets/css/components.css
index 180a011..6f4f7ab 100644
--- a/frontend/src/assets/css/components.css
+++ b/frontend/src/assets/css/components.css
@@ -296,9 +296,8 @@
 /* --- Player chips --- */
 .player-chips {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
     gap: 0.75rem;
-    justify-content: center;
     margin-top: 1rem;
 }
 
@@ -306,10 +305,11 @@
     background: color-mix(in srgb, var(--text) 6%, transparent);
     border: 1px solid var(--edge);
     padding: 0.5rem 1.25rem;
-    border-radius: 30px;
+    border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    width: 100%;
     transition: var(--transition-smooth);
 }
 
@@ -328,7 +328,7 @@
 }
 
 .list-chips {
-    justify-content: flex-start;
+    align-items: stretch;
 }
 
 .list-chips .player-chip {
diff --git a/frontend/src/assets/css/scene-play.css b/frontend/src/assets/css/scene-play.css
index 6e6c469..db66636 100644
--- a/frontend/src/assets/css/scene-play.css
+++ b/frontend/src/assets/css/scene-play.css
@@ -183,23 +183,13 @@
     font-size: 0.85rem;
 }
 
-/* On narrow screens the crew column becomes a horizontal strip above the board */
+/* Keep the crew roster vertical at every width, matching the other phases. */
 @media (max-width: 1100px) {
-    .crew-bubbles {
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: flex-start;
-    }
     .crew-bubble {
-        width: auto;
-        flex: 1 1 140px;
+        width: 100%;
     }
     .crew-objectives-toggle {
-        width: auto;
-        flex: 1 1 100%;
-    }
-    .crew-objectives-detail {
-        flex: 1 1 100%;
+        width: 100%;
     }
 }
 
diff --git a/frontend/src/lib/changelog.js b/frontend/src/lib/changelog.js
index 7467179..b95a240 100644
--- a/frontend/src/lib/changelog.js
+++ b/frontend/src/lib/changelog.js
@@ -6,10 +6,17 @@
 //   - Add a CHANGELOG entry only when a commit changes something players can
 //     see. Skip refactors, tests, and tooling. Keep wording player-facing.
 
-export const VERSION = 20;
+export const VERSION = 21;
 
 // Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }.
 export const CHANGELOG = [
+    {
+        version: 21,
+        date: '2026-07-10',
+        changes: [
+            'Player lists now use the same easy-to-scan vertical layout in every phase and at every screen size.',
+        ],
+    },
     {
         version: 20,
         date: '2026-07-10',