commanders are one per line, not a grid

sm:grid-cols-2 xl:grid-cols-3 was reasonable when this panel owned 34% of the screen. It owns part of a 24%
column now, so two columns of card inside it left each one too narrow for its title — every card truncated
and the cost line wrapped.

A grid of one. The card is untouched: same rounded pill, same border and hover, same p-4, same gap-3 between
them. It simply stops being asked to share a row.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

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}