From 9230968b190ddf83203605f0de344a9598064057 Mon Sep 17 00:00:00 2001
From: Garrett Mills <shout@garrettmills.dev>
Date: Wed, 28 Oct 2026 22:03:45 -0500
Subject: [PATCH] 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         | 18 +++++++++++++++++-
 src/views/DeckList.tsx |  7 ++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index aed2164..f232b67 100644
--- a/src/styles.css
+++ b/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);
diff --git a/src/views/DeckList.tsx b/src/views/DeckList.tsx
index 9970b9f..c8f159a 100644
--- a/src/views/DeckList.tsx
+++ b/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>