Deck list: keep tile badges from overflowing

The maybeboard count moves to the footer beside "% owned", and the status
/ format / size row wraps instead of squeezing, with the size kept at the
right edge. The footer's left side truncates rather than wrapping.

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

src/styles.css

@@ -2902,13 +2902,22 @@ button.pull-action {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+/* Wraps rather than squeezing when the tile is narrow: each item stays on one
+   line, and the deck size keeps to the right edge, on whichever line it lands. */
 .deck-tile-meta {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-1) var(--space-2);
   font-size: var(--fs-caption);
   min-height: 22px;
 }
+.deck-tile-meta > * {
+  white-space: nowrap;
+}
+.deck-tile-meta .deck-size {
+  margin-left: auto;
+}
 .deck-tile-meta .deck-chip,
 .deck-row-stats .deck-chip {
   margin-right: 0;
@@ -2916,9 +2925,16 @@ button.pull-action {
 .deck-tile-foot {
   display: flex;
   justify-content: space-between;
+  gap: var(--space-2);
   font-size: var(--fs-caption);
   color: var(--muted);
 }
+.deck-tile-foot span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .deck-tile-foot span:last-child,
 .deck-row-cost {
   color: var(--text);

src/views/DeckList.tsx

@@ -252,13 +252,14 @@ function DeckTile({ row, actions }: { row: Row; actions: DeckActions }) {
         <div className="deck-tile-meta">
           <StatusChip row={row} />
           {deck.format ? <span className="deck-chip">{deck.format}</span> : <span className="muted">No format</span>}
-          {s.maybeboardCount > 0 && <span className="muted">+{s.maybeboardCount} maybe</span>}
-          <span className="spacer" />
           <DeckSize summary={s} />
         </div>
         <OwnedBar summary={s} />
         <div className="deck-tile-foot">
-          <span>{ownedLabel(s)}</span>
+          <span>
+            {ownedLabel(s)}
+            {s.maybeboardCount > 0 && ` · +${s.maybeboardCount} maybe`}
+          </span>
           <span>{formatCost(s.cost)}</span>
         </div>
       </div>