fix(web): keep release deck aligned on phones

Under 40rem the seven-column line cannot fit: hdr and audio move
into the expand row, the surviving five columns tighten, and the
column header never wraps at any width.

Closes #105

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

web/src/main.ts

@@ -1171,9 +1171,12 @@ function releaseRow(
       const meta = document.createElement("p");
       meta.className = "rel-meta readout dim";
       const published = formatPublishDate(release.publish_date);
+      // hdr and audio leave the chip line under 40rem; the expand carries them
       meta.textContent = [
         `indexer ${release.indexer_id}`,
         published === null ? null : `published ${published}`,
+        `hdr ${formatHdr(release.parsed)}`,
+        `audio ${formatAudio(release.parsed)}`,
         `${release.size} bytes`,
       ]
         .filter((part) => part !== null)

web/src/style.css

@@ -897,9 +897,10 @@ body {
   text-align: right;
 }
 
+/* §9.3: headers never wrap — the narrow-deck block below sheds columns
+   instead */
 .colhead {
   display: flex;
-  flex-wrap: wrap;
   gap: var(--space-1);
   padding: var(--space-2) var(--space-1) 0;
 }
@@ -1161,3 +1162,40 @@ body {
     height: 0.5rem;
   }
 }
+
+/* ---- narrow deck (§9.3 at phone widths) ------------------------------- */
+
+/* the full seven-column line is 36rem; under 40rem it cannot fit, so hdr
+   and audio leave the line (the expand row carries them) and the five
+   surviving columns tighten — aligned, never wrapped, never scrolled */
+@media (max-width: 40rem) {
+  .colhead .cw,
+  .rel-line .chip {
+    padding: 0 var(--space-1);
+  }
+
+  .cw-hdr,
+  .cw-aud {
+    display: none;
+  }
+
+  .cw-score {
+    width: 3rem;
+  }
+
+  .cw-res {
+    width: 3rem;
+  }
+
+  .cw-src {
+    width: 3.5rem;
+  }
+
+  .cw-size {
+    width: 3rem;
+  }
+
+  .cw-seed {
+    width: 2.5rem;
+  }
+}