Show the story sort headings as chips on narrow screens

bindery/static/style.css

@@ -875,18 +875,45 @@ textarea {
     display: block;
   }
 
+  /* The column headings become a row of sort chips. The chip of the sorted column is tinted and
+     shows the direction. The other chips show no arrow. */
   .stories-table thead tr {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px 16px;
-    margin-bottom: 8px;
+    gap: 6px;
+    margin-bottom: 10px;
+  }
+
+  .stories-table thead tr::before {
+    content: 'Sort by';
+    flex-basis: 100%;
+    color: var(--muted);
+    font-size: var(--text-sm);
   }
 
   .stories-table th {
-    padding: 4px 0;
+    padding: 0;
     border: 0;
   }
 
+  .stories-table th button {
+    inline-size: auto;
+    padding: 3px 10px;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    background: var(--surface);
+    font-size: var(--text-sm);
+  }
+
+  .stories-table th[aria-sort='none'] button::after {
+    display: none;
+  }
+
+  .stories-table th:not([aria-sort='none']) button {
+    background: var(--info-bg);
+    color: var(--info);
+  }
+
   .stories-table tbody tr,
   .chapters-table tbody tr {
     border: 1px solid var(--border);

tests/js/layout.test.mjs

@@ -114,6 +114,30 @@ test('sortable headings show direction and remain usable above story cards on na
   assert.doesNotMatch(css, /\.stories-table thead\s*\{[^}]*clip-path/);
 });
 
+test('on narrow screens the headings are sort chips, and only the sorted chip is tinted with an arrow', () => {
+  const start = css.indexOf('@media (max-width: 600px)', css.indexOf('.stories-table th button'));
+  const mobile = css.slice(start);
+  assert.equal(declarations('.stories-table thead tr', mobile)['flex-wrap'], 'wrap');
+  const caption = declarations('.stories-table thead tr::before', mobile);
+  assert.equal(caption.content, "'Sort by'");
+  assert.equal(caption['flex-basis'], '100%');
+  const chip = declarations('.stories-table th button', mobile);
+  assert.equal(chip['border-radius'], '999px');
+  assert.equal(chip['inline-size'], 'auto');
+  assert.equal(chip.padding, '3px 10px');
+  assert.equal(chip['font-size'], 'var(--text-sm)');
+  assert.equal(chip.background, 'var(--surface)');
+  assert.equal(declarations(".stories-table th[aria-sort='none'] button::after", mobile).display, 'none');
+  const sorted = declarations(".stories-table th:not([aria-sort='none']) button", mobile);
+  assert.equal(sorted.background, 'var(--info-bg)');
+  assert.equal(sorted.color, 'var(--info)');
+  assert.equal(sorted['border-color'], undefined, 'The sorted chip keeps the soft border');
+  // The wide layout keeps plain headings.
+  const wide = css.slice(0, start);
+  assert.doesNotMatch(wide, /\.stories-table thead tr::before/);
+  assert.equal(declarations('.stories-table th button', wide).border, '0');
+});
+
 test('sortable headings fill the column with one clickable highlight without shifting layout', () => {
   assert.equal(declarations('.stories-table th').padding, '0');
   const button = declarations('.stories-table th button');