Keep a message header on three lines in a narrow pane (#73)

Below 36rem of pane width the date, the menu and the arrow move onto a row of their own under the sender, so the sender gets the full width. A container query on the message list, so it follows the pane, not the window.

Co-authored-by: Flouss <15911342+Flouss@users.noreply.github.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -8,6 +8,13 @@ The published image tags: `latest` follows the most recent release below,
 
 ## Unreleased
 
+**A message's header no longer breaks into pieces in a narrow pane.** On a phone, or with the
+reading pane on the right and dragged narrow, the sender's address was cut mid-word across three
+lines while the date and the buttons took half the width. Below 36rem of pane width the date, the
+menu and the arrow now sit on a row of their own under the header, so the sender gets the full
+width. It follows the width of the pane, not of the window. Wider panes are unchanged. No
+migration.
+
 **All Mail, if you want it: every conversation outside Spam and the bin, in one list (#57).**
 Archived mail had no list of its own to be browsed in, only search. All Mail holds it, together
 with what arrived, what you sent and your drafts, as Gmail's All Mail does, leaving out only Spam

assets/styles/app.css

@@ -5386,6 +5386,45 @@ label:has(> input.sr-only) {
     z-index: 30;
 }
 
+/* ═══ A message header in a narrow pane ═════════════════════════════════════
+   The header is one row: avatar, sender, and a block holding the date, the ⋮
+   menu and the chevron. The last of those is as wide as it is on a desktop
+   (the date alone is ~150px), so in a pane of phone width it left the sender
+   about 110px and the address broke mid-word onto three lines.
+
+   Keyed to the width of `.thread-messages`, NOT to a media query. The reading
+   pane on the right makes a ~400px message pane on a 1920px monitor, and a
+   viewport breakpoint would fix the phone and leave exactly that case broken.
+   36rem is the same threshold the list rows use for their own narrow layout.
+
+   Narrow, the date block drops to a row of its own: the date at the left, ⋮
+   and the chevron at the right, indented to line up under the sender rather
+   than under the avatar. That gives the sender the full width, and the row it
+   already is (name, address, labels, `flex-wrap`) does the rest: the address
+   sits beside the name when it fits and takes a line of its own when it does
+   not. How much of a long address shows on that line is the address's own
+   styling, which this block does not touch. */
+.thread-messages {
+    container: thread-messages / inline-size;
+}
+
+@container thread-messages (max-width: 36rem) {
+    .thread-message-head {
+        flex-wrap: wrap;
+        row-gap: 0.125rem;
+    }
+
+    /* 3rem = the avatar (2.25rem) and the header's gap (0.75rem). */
+    .thread-message-meta {
+        flex: 0 0 100%;
+        padding-left: 3rem;
+    }
+
+    .thread-message-date {
+        margin-right: auto;
+    }
+}
+
 /* ═══ Dragging conversations onto folders and tabs ═════════════════════════
    The visual half of mail--dnd. Everything here keys off two data attributes
    the controller sets and clears: `data-dnd-active` on <html> for the whole

templates/mail/_thread_content.html.twig

@@ -188,7 +188,10 @@ self-contained: no {% extends %}, no block dependencies.
            the stagger turns "a conversation opened" into a conversation being
            laid out. It costs nothing on the common single-message thread, and
            motion.css caps it at eight so a long one still finishes at once. #}
-        <div id="thread_messages_{{ thread.id }}" data-enter-stagger>
+        {# `.thread-messages` is the container the message headers query: how
+           much room a header has is the width of THIS block, which in the
+           reading pane is the pane's, not the window's. See app.css. #}
+        <div id="thread_messages_{{ thread.id }}" class="thread-messages" data-enter-stagger>
             {% for message in messages %}
                 {% include 'mail/_thread_message.html.twig' with {
                     message:  message,

templates/mail/_thread_message.html.twig

@@ -168,8 +168,8 @@ Variables:
             </div>
         </div>
 
-        <div class="flex items-center gap-1 flex-shrink-0">
-            <span class="text-xs text-ink-faint whitespace-nowrap">
+        <div class="thread-message-meta flex items-center gap-1 flex-shrink-0">
+            <span class="thread-message-date text-xs text-ink-faint whitespace-nowrap">
                 {# Date through the locale, time through the user's 12/24-hour
                    setting: the two answer different questions and only one of
                    them is a property of the language. Sent mail has no