From f4a8ba4ea82ed771cb52509c642df7385a982c99 Mon Sep 17 00:00:00 2001
From: rays <ray.slakinski@gmail.com>
Date: Fri, 9 Oct 2026 12:38:26 +0000
Subject: [PATCH] Box the download settings instead of hanging them from a rule
 (#167)

Asked for after the redesign: the switch and what depends on it sit in one box with rounded
corners, in place of the rule down their left side. Drawn in --line rather than --edge, so it shows
on a phone too, where --edge draws no outlines; the indent the rule needed goes with it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/app.css        | 17 +++++++++--------
 web/src/dialogs.ts |  4 ++--
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/web/app.css b/web/app.css
index ade6aed..1d35394 100644
--- a/web/app.css
+++ b/web/app.css
@@ -1081,12 +1081,14 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
 .sw input:checked+i{background:var(--accent);border-color:var(--accent)}
 .sw input:checked+i::after{transform:translateX(16px)}
 .sw input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
-/* What only matters while it downloads on its own hangs from that switch, and folds away when it
-   is off. The rows in a grid of one row, 1fr open and 0fr shut, so the fold has a height to move. */
-.fdeps{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s ease;margin:2px 0 6px 20px;border-left:2px solid var(--line)}
-.fdeps.off{grid-template-rows:0fr;border-left-color:transparent}
+/* The switch and what only matters while it downloads on its own, in one box; the rest folds away
+   when it is off. In --line, not --edge, so the box shows on a phone, which draws no outlines. The
+   rows in a grid of one row, 1fr open and 0fr shut, so the fold has a height to move. */
+.fdl{border:1px solid var(--line);border-radius:12px;padding:4px 14px}
+.fdeps{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s ease}
+.fdeps.off{grid-template-rows:0fr}
 .fdeps>div{min-height:0;overflow:hidden}
-.fdepsin{padding:8px 2px 6px 18px}
+.fdepsin{padding:6px 2px 10px}
 /* The app's own segmented control, with radio buttons in it, for the arrow keys. */
 .seg{margin-bottom:12px}
 .seg label{flex:1;position:relative;text-align:center;white-space:nowrap;padding:5px 10px;border-radius:7px;font-size:13px;color:var(--dim);cursor:pointer}
@@ -1106,7 +1108,7 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
 .wcap{margin:0 0 16px;font-size:13px;line-height:1.55;color:var(--dim)}
 .wcap input[type=number]{display:inline-block;width:4.2em;margin:0 2px;padding:1px 4px;font-size:13px;text-align:center;font-variant-numeric:tabular-nums;color:var(--fg)}
 .ffield{display:grid;gap:6px;margin-bottom:14px}
-.fdeps+.ffield{margin-top:18px}
+.fdl+.ffield{margin-top:18px}
 .flabel{font-size:14px;font-weight:500}
 .cap{margin:0;font-size:12.5px;line-height:1.45;color:var(--dim)}
 /* Words and phrases as chips: in one comma-separated box, one ran into the next. */
@@ -1347,8 +1349,7 @@ body:has(#player.on) #status{padding-bottom:3px}
   .chips{background:var(--panel2);border-color:var(--edge);border-radius:10px}
   .chip{background:var(--panel);font-size:15px;padding:5px 4px 5px 12px}
   .chipx{width:26px;height:26px}
-  .fdeps{margin-left:12px}
-  .fdepsin{padding-left:14px}
+  .fdl{border-radius:14px;padding:4px 14px}
   .toast{border-radius:14px}
 }
 @keyframes sheet{from{transform:translateY(100%)}}
diff --git a/web/src/dialogs.ts b/web/src/dialogs.ts
index a5421a0..13058f4 100644
--- a/web/src/dialogs.ts
+++ b/web/src/dialogs.ts
@@ -505,7 +505,7 @@ function settingsModal(f, newUrl?: string){
       <div class="inline"><input type="text" id="surl" value="${esc(newUrl||f.url)}" spellcheck="false"${admin?'':' readonly'}>
         <button type="button" class="btn ico" id="scopy" title="Copy the address" aria-label="Copy the address">${ICON.copy}</button></div>
       ${newUrl?'<p class="moved">The feed says it has moved here. Save to follow it.</p>':''}</div>
-    ${sw(`<input type="checkbox" role="switch" id="sauto"${f.auto_download?' checked':''}>`,'Download automatically',' lead')}
+    <div class="fdl">${sw(`<input type="checkbox" role="switch" id="sauto"${f.auto_download?' checked':''}>`,'Download automatically',' lead')}
     <div class="fdeps${f.auto_download?'':' off'}" id="sdeps"><div><div class="fdepsin">
       <div class="tabs seg" role="radiogroup" aria-label="How many to download">${
         [['default',`Default (${globalMax||'all'})`],['newest','Newest'],['all','All']].map(([v,t])=>
@@ -516,7 +516,7 @@ function settingsModal(f, newUrl?: string){
         <div class="chips" id="skw">${chipsHTML(f.keywords,'skwin')}</div>
         <p class="cap">Any one of these will do, and a phrase needs all its words. Empty takes everything.</p></div>
       ${sw(`<input type="checkbox" role="switch" id="sexp"${f.allow_explicit?' checked':''}>`,'Include explicit items')}
-    </div></div></div>
+    </div></div></div></div>
     ${isGroup?'':`<div class="ffield"><label class="flabel" for="sblockin">Hide items that mention</label>
       <div class="chips" id="sblock">${chipsHTML(f.blocked||[],'sblockin')}</div>
       <p class="cap">Whole words or phrases. Hidden from your list and not downloaded for you, along