Sort stories through column headings

tests/js/layout.test.mjs

@@ -103,6 +103,33 @@ test('story timestamps fit their text and chapter details use plain small text',
   assert.equal(details.padding, undefined);
 });
 
+test('sortable headings show direction and remain usable above story cards on narrow screens', () => {
+  assert.equal(declarations('.stories-table th button').background, 'none');
+  assert.equal(declarations('.stories-table th[aria-sort] button::after').content, "'↕'");
+  assert.equal(declarations(".stories-table th[aria-sort='ascending'] button::after").content, "'↑'");
+  assert.equal(declarations(".stories-table th[aria-sort='descending'] button::after").content, "'↓'");
+  const mobile = css.slice(css.indexOf('@media (max-width: 600px)'));
+  assert.equal(declarations('.stories-table thead tr', mobile).display, 'flex');
+  assert.notEqual(declarations('.stories-table th', mobile).display, 'none');
+  assert.doesNotMatch(css, /\.stories-table thead\s*\{[^}]*clip-path/);
+});
+
+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');
+  assert.equal(button['inline-size'], '100%');
+  assert.equal(button['justify-content'], 'flex-start');
+  assert.equal(button.padding, '6px 8px');
+  assert.equal(button.margin, undefined);
+  const highlight = declarations('.stories-table th button:is(:hover, :focus-visible)');
+  assert.equal(highlight.background, 'var(--info-bg)');
+  assert.equal(highlight.color, 'var(--info)');
+  assert.equal(highlight['text-decoration'], undefined);
+  assert.equal(highlight.padding, undefined);
+  assert.equal(highlight.border, undefined);
+  assert.doesNotMatch(css, /\.stories-table th button:hover\s*\{[^}]*underline/);
+});
+
 function luminance(hex) {
   const channels = hex.slice(1).match(/../g).map((channel) => {
     const value = parseInt(channel, 16) / 255;