diff --git a/src/workspaces/officerdev/src/apps/CommandHQ/CommandHqGrid.tsx b/src/workspaces/officerdev/src/apps/CommandHQ/CommandHqGrid.tsx
index 5fccab2a..4a78fb3f 100644
--- a/src/workspaces/officerdev/src/apps/CommandHQ/CommandHqGrid.tsx
+++ b/src/workspaces/officerdev/src/apps/CommandHQ/CommandHqGrid.tsx
@@ -140,7 +140,16 @@ export const CommandHqGrid = () => {
         </Link>
       </div>
 
-      <div className="grid grid-cols-1 gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3">
+      {/*
+        One per line, full width — a grid of one.
+
+        It was `sm:grid-cols-2 xl:grid-cols-3`, which was reasonable when this panel owned 34% of the screen
+        and is not now that it owns part of a 24% column: two columns of card inside it left each one too
+        narrow for a title, so every card truncated and the cost line wrapped. Nothing about the card changed
+        — same rounded pill, same `p-4`, same `gap-3` between them — it simply stops being asked to share a
+        row.
+      */}
+      <div className="flex flex-col gap-3 p-4">
         {commanders.map((commander) => (
           <Card
             key={commander.id}