board: on a phone a table row is a card, not a ribbon

board/_theme.py

@@ -429,6 +429,23 @@ def mark(key):
  padding-top:.58rem}
 table.recent td.pick{width:2.6rem;padding-right:0}
 table.recent button.copy{width:2.2rem;height:2.2rem;font-size:.95rem}
+/* On a phone a four-column row is not a row, it is a ribbon. Measured at a
+   375px viewport: the meta columns took 156px and the text was left 187 — half
+   the screen — so every entry wrapped into a tall thin column down the right
+   while the meta cells sat beside it as empty height. Below 34rem the row
+   stacks: the meta reads as one small header line with the button at its end,
+   and the text takes the full width underneath. */
+@media(max-width:34rem){
+ /* `:not([hidden])` is load-bearing: `display:flex` here outranks the UA
+    sheet's `[hidden]{display:none}`, which would reveal the whole paged
+    Recent feed at once. */
+ table.recent tr:not([hidden]){display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .5rem;
+  padding:.5rem 0;border-bottom:1px solid var(--line)}
+ table.recent td{display:block;width:auto;border-bottom:0;padding:0}
+ table.recent td.what{padding-top:0}
+ table.recent td.pick{width:auto;margin-left:auto}
+ table.recent td:not([class]){flex:1 0 100%%;margin-top:.15rem}
+}
 /* --- the family footer: one chip per sibling board, in its own colour --- */
 .boards{display:flex;flex-wrap:wrap;gap:.4rem;margin:2.4rem 0 0;padding:0;
  list-style:none;border-top:1px solid var(--line);padding-top:1rem}

tests/test_board_theme.py

@@ -220,3 +220,23 @@ def test_a_pill_is_bounded_because_nowrap_is_outside_the_wrap_guard():
     # overflow:hidden moves an inline-block's baseline to its bottom edge, so
     # the old optical nudge would drop every chip half a line.
     assert "vertical-align:bottom" in flat
+
+
+def test_the_narrow_screen_stack_never_reveals_the_paged_feed():
+    """`display:flex` on a row outranks the UA sheet's `[hidden]{display:none}`,
+    so a bare `table.recent tr` selector would unhide every row the Recent
+    feed pages behind its '… more' button — 50 rows instead of 10."""
+    css = _theme.css("mind")
+    stack = re.search(r"@media\(max-width:34rem\)\{.*?\n\}", css, re.S).group(0)
+    assert "table.recent tr:not([hidden]){display:flex" in stack.replace("\n ", "")
+    assert "table.recent tr{display:flex" not in css
+
+
+def test_a_row_stacks_on_a_phone_so_the_text_gets_the_width():
+    """Four columns on a 375px screen left the text 187px and ran each entry
+    down the right as a ribbon; below 34rem the meta leads and the text takes
+    a full-width line of its own."""
+    stack = re.search(r"@media\(max-width:34rem\)\{.*?\n\}", _theme.css("mind"),
+                      re.S).group(0).replace("\n ", "")
+    assert "table.recent td{display:block;width:auto" in stack
+    assert "table.recent td:not([class]){flex:1 0 100%" in stack