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 }) {