From 35b57fa9973b0a1f4ec57e12d9127fba3d915258 Mon Sep 17 00:00:00 2001
From: rays <ray.slakinski@gmail.com>
Date: Sat, 19 Sep 2026 01:45:02 +0000
Subject: [PATCH] Settings and the shortcuts list close from the corner

Both have nothing to confirm, so their only button was a lone X at the
foot of the card, below the fold of a long Settings card. A dialog with a
confirm keeps Cancel beside it at the bottom, where the pair belongs.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 CHANGELOG.md         | 1 +
 tests/ui/app.spec.js | 2 +-
 web/app.css          | 3 +++
 web/src/dialogs.ts   | 5 ++---
 web/src/player.ts    | 5 ++---
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 982c765..4c0eb51 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   "Downloaded" toast is only for a file on your screen.
 - "Check every feed" checks every feed you subscribe to, not every feed on the server.
 - The Classic theme is listed in Settings as just "Classic".
+- Settings and the keyboard shortcuts close from an X in their top corner, not a button at the bottom.
 
 ### Fixed
 
diff --git a/tests/ui/app.spec.js b/tests/ui/app.spec.js
index 09e983d..6f9618b 100644
--- a/tests/ui/app.spec.js
+++ b/tests/ui/app.spec.js
@@ -576,7 +576,7 @@ test('a second person has their own feeds and their own read state', async ({ br
   await page.locator('#prefs').click();
   await expect(page.locator('#modalCard')).toContainText('Subscriptions');
   await expect(page.locator('#modalCard')).toContainText('Only an admin changes this');
-  await page.locator('#modalCard .cardacts .btn').first().click();
+  await page.locator('#modalCard .cardx').click();
   await expect(page.locator('#admin')).toHaveCount(0);
   expect(await (await page.request.get('/')).text()).not.toContain('href=/admin');
   // Asking for it anyway goes back to the app, and its script is refused.
diff --git a/web/app.css b/web/app.css
index 16d22cc..7297b50 100644
--- a/web/app.css
+++ b/web/app.css
@@ -701,6 +701,9 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
 .logbar{display:flex;gap:8px;align-items:center;margin-bottom:9px;flex-wrap:wrap}
 .logbar .grow{flex:1;min-width:120px}
 .card h3{margin:0 0 14px;font-size:17px}
+/* A dialog with nothing to confirm closes from the corner, beside its title, not from a lone button
+   at the foot of a long card. */
+.cardx{float:right;margin:-5px -6px 0 8px}
 .field{display:grid;gap:4px;margin-bottom:12px}
 .field label{font-size:12px;color:var(--dim)}
 .field .hint{font-size:11.5px;color:var(--faint)}
diff --git a/web/src/dialogs.ts b/web/src/dialogs.ts
index 2e84df0..badb923 100644
--- a/web/src/dialogs.ts
+++ b/web/src/dialogs.ts
@@ -218,7 +218,7 @@ function due(ts){
 async function prefsModal(){
   const g = await api('/api/settings');
   const admin = !!(S.me&&S.me.admin);
-  openModal(`<h3>Settings</h3>
+  openModal(`<button class="iconbtn cardx" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button><h3>Settings</h3>
     <div class="field"><label>Theme</label>
       <select id="stheme">${Object.entries(THEMES).map(([k,t])=>
         `<option value="${k}"${theme.name===k?' selected':''}>${esc(t.name)}</option>`).join('')}</select></div>
@@ -238,8 +238,7 @@ async function prefsModal(){
       <span class="hint">${everyText(g.every_mins)}, for every feed that does not set its own.
       ${admin?'This and the rest of the server\'s settings are on the <a href="/admin">admin page</a>.':'Only an admin changes this.'}</span></div>
     <div class="field"><label>Download folder</label>
-      <span class="hint" style="overflow-wrap:anywhere">${esc(g.download_dir)}</span></div>
-    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button></div>`);
+      <span class="hint" style="overflow-wrap:anywhere">${esc(g.download_dir)}</span></div>`);
   $('#stheme').onchange=e=>setTheme(e.target.value,undefined,true);
   $('#smode').onchange=e=>setTheme(undefined,e.target.value,true);
   $('#gopml').onclick=opmlModal;
diff --git a/web/src/player.ts b/web/src/player.ts
index 465efba..96961bf 100644
--- a/web/src/player.ts
+++ b/web/src/player.ts
@@ -191,8 +191,7 @@ function keysModal(){
     ['Anywhere'],
     [k('?'),'This list'],[k('Esc'),'Close a dialog'],
   ];
-  openModal(`<h3>Keyboard shortcuts</h3><table class="keys">${rows.map(([a,b])=>b===undefined
-      ?`<tr><th colspan="2">${a}</th></tr>`:`<tr><td>${a}</td><td>${b}</td></tr>`).join('')}</table>
-    <div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button></div>`);
+  openModal(`<button class="iconbtn cardx" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button><h3>Keyboard shortcuts</h3><table class="keys">${rows.map(([a,b])=>b===undefined
+      ?`<tr><th colspan="2">${a}</th></tr>`:`<tr><td>${a}</td><td>${b}</td></tr>`).join('')}</table>`);
 }