feat(layout): use the width instead of a column in the middle of the screen

Every screen got the same 672px column, so a desktop reader read a phone page
with two thirds of the window empty — and the one design criticism the release
thread produced was formed from a screenshot.

Past lg the page splits along the line this codebase already draws: what it
tells the reader to do — the next deadlines, tonight's dailies — pins to a
rail on the left and stays there while the lists it shows them scroll beside
it. The footer and the settings panel become columns rather than a long fall
of small grey text. Below that breakpoint nothing moves: the same split puts
the instructions first in one column.

The rail's rule sits on the panel rather than the column. The panel is short
and the list beside it is long, so a full-height divider would spend most of
its length walling off a gap.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/client/styles.css

@@ -290,3 +290,14 @@ body {
   scrollbar-width: thin;
   scrollbar-color: var(--color-hairline) transparent;
 }
+
+/*
+ * Panes that scroll in both directions — the timeline board, and the pinned
+ * deadline rail on a wide screen. Same quiet bar chrome as `.scroll-x`, but the
+ * overflow itself is left to the element, because both of those only become
+ * scrollers at a breakpoint.
+ */
+.scroll-pane {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-hairline) transparent;
+}