Keep a feed's and an item's buttons on one row (#146)

A feed's page has seven 44px buttons, which fit a 390px phone with nothing to spare: on a 360px
one, Unsubscribe went onto a second row by itself. Below that width an icon button now narrows
rather than the row breaking. The reader's buttons were items of its meta line itself, so a long
feed name took them onto the next line one at a time; they are one group now, which moves as one.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- A feed's buttons stay on one row on a narrow phone, and the reader's buttons stay together instead of breaking across lines under a long feed name.
 - A moment's DNS failure no longer marks a feed as failing for a day or calls it gone: iPX tries it again in ten minutes. One failed lookup one morning left 205 podcasts unread, uncategorised and labelled gone until the next day. A name that does not resolve is said to be maybe gone, and only once it has been failing a day, on its Directory page as on its own.
 
 ## [0.10.2] - 2026-10-05

web/app.css

@@ -802,6 +802,9 @@ body.scan-this .fhead [data-a=scan] .i,body.scan-any .fhead [data-a=scanall] .i,
 .dt{font-size:18px;font-weight:650;margin:0 0 5px;line-height:1.3;overflow-wrap:anywhere}
 .dmeta{color:var(--faint);font-size:12.5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
 .dmeta .btn{padding:3px 9px;font-size:12px}
+/* The reader's buttons go as one: as items of the line itself, a long feed name took them onto
+   the next line one at a time (#146). */
+.dacts{display:flex;gap:inherit;flex:none}
 #detail .encbox{margin:0 0 10px}
 .dbody{font-size:14.5px;line-height:1.65;overflow-wrap:anywhere;color:var(--fg)}
 .dbody img{max-width:100%;height:auto;border-radius:6px}
@@ -818,7 +821,7 @@ body.scan-this .fhead [data-a=scan] .i,body.scan-any .fhead [data-a=scanall] .i,
 .fhead .sub{color:var(--dim);font-size:13px;margin-bottom:8px}
 .fhead .sub a{color:var(--dim);text-decoration:none}
 .fhead .sub a:hover{color:var(--accent)}
-.acts{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:auto}
+.acts{display:flex;gap:7px;align-items:center;margin-top:auto}
 .acts .btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px}
 .acts .btn i{font-style:normal;font-size:13px;line-height:1;opacity:.7}
 .acts .btn:hover{background:var(--raise)}
@@ -1212,6 +1215,9 @@ body:has(#player.on) #status{padding-bottom:3px}
   .fhead .sub{font-size:15px}
   .acts{gap:8px}
   .acts .btn{min-width:44px;height:44px;padding:0 13px;justify-content:center;font-size:15px}
+  /* Seven to a row with no room to spare at 390px: below that an icon button narrows rather than
+     the row breaking, which left Unsubscribe alone on a second row (#146). */
+  .acts .btn.ico{flex:0 1 44px;min-width:0;padding:0}
 
   /* Tabs as a segmented control: equal segments on one track, the chosen one lifted. */
   .tabs{flex:1 1 100%;border-radius:10px;padding:2px}

web/src/items.ts

@@ -300,13 +300,13 @@ function detailHtml(e){
       ${/* Joined, so a missing date or number leaves no stray dot behind. */
         [f&&esc(f.title||f.id), num, dateOf(e.published), e.duration&&clock(e.duration)]
         .filter(Boolean).map(s=>`<span>${s}</span>`).join('<span class="dot"></span>')}
-      <button class="btn ico" data-a="read" title="Mark ${e.read?'unread':'read'}"
+      <span class="dacts"><button class="btn ico" data-a="read" title="Mark ${e.read?'unread':'read'}"
         aria-label="Mark ${e.read?'unread':'read'}" aria-pressed="${!!e.read}">${e.read?ICON.check:ICON.unread}</button>
       <button class="btn ico" data-a="flag" title="${e.flagged?'Pinned: never deleted. Unpin':'Pin, so it is never deleted'}"
         aria-label="${e.flagged?'Unpin':'Pin'}" aria-pressed="${!!e.flagged}">${e.flagged?ICON.pinOn:ICON.pin}</button>
       ${e.link?`<a class="btn ico" href="${esc(e.link)}" target="_blank" rel="noopener noreferrer"
         title="Open the original" aria-label="Open the original">${ICON.open}</a>
-      <button class="btn ico" data-a="share" title="Share" aria-label="Share">${ICON.share}</button>`:''}
+      <button class="btn ico" data-a="share" title="Share" aria-label="Share">${ICON.share}</button>`:''}</span>
     </div>
     ${narrow?encs:''}
     <div class="dbody">${(e.description&&e.description.trim())||'<em>No show notes.</em>'}</div>`;