fix(ui): keep the table columns readable on a phone

The tables were squeezed to fit the screen, and with seven to nine
columns on a 390px phone every heading and every value was truncated to
a few characters - a gravity of "1.0..." and a date of "202..." are
worse than useless, and the beer name was painted over the gravity
reading because the cell was allowed to overflow.

The tables keep their natural width and scroll sideways inside their
card, which is what a table does.  The advice is a small button so the
column that matters is narrow, and the headings have a short form for
a phone ("Brewing advice" -> "Advice", "Attenuation" -> "Att.").

The secondary columns - the drop, the legacy ABV and the days - go away
on a phone; the details are still on the run's own page.

A name and a comment get a sensible minimum width and wrap on a word
boundary rather than one word per line.

The desktop is untouched: the same full headings, the same 806px table,
and the pop-out still opens on hover.

tests/test_brew_advice.py

@@ -1024,6 +1024,31 @@ def test_the_advice_in_the_table_is_a_popout_not_the_text(client, repo):
     assert "Warm it to 21C and wait." in body
 
 
+def test_the_tables_keep_their_columns_on_a_phone(client, repo):
+    """The tables are readable on a phone, not squeezed into nothing.
+
+    The advice is a button and the table scrolls, so nothing is
+    truncated to an unreadable stub.
+    """
+    repo.users.insert_one({"username": "beer", "password": "beer_pass"})
+    client.post("/login", data={"username": "beer", "password": "beer_pass"},
+                follow_redirects=True)
+
+    seed_readings(repo, [("1", "Cider raspberry elderberry", "1045", "2026-01-01", False, "")])
+    doc = repo.readings.find_one({"beer_run_id": "1"})
+    repo.set_reading_advice(str(doc["_id"]), "Warm it to 21C and wait.", ok=True)
+
+    body = client.get("/brews").get_data(as_text=True)
+
+    # The long heading has a short form for a phone, and the long form
+    # is still in the page for a desktop.
+    assert "Brewing advice" in body
+    assert ">Advice<" in body.replace("\n", "")
+
+    # The beer name is not truncated in the markup.
+    assert "Cider raspberry elderberry" in body
+
+
 def test_a_failed_advice_is_marked_as_such(client, repo):
     """A generation failure reads differently from real advice."""
     repo.users.insert_one({"username": "beer", "password": "beer_pass"})