amadan
web: keep access-level checkboxes beside their names (#761)
The app-wide input { width:100% } rule made the bare checkboxes in the
access-level member picker (admin app) and the profile sheet's "Show on
my profile" toggle full-width flex items, shoving the label text to the
far edge of the row. Size the checkboxes explicitly (18px, flex:none),
matching what .toggle-row/.opt-row already do for every other checkbox.
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
3 files changed,
+9
−0
changelog/2026-07-12-access-level-checkbox-rows.md+3 −0web/static/apps/admin.js+3 −0web/static/shell.js+3 −0
diff --git a/changelog/2026-07-12-access-level-checkbox-rows.md b/changelog/2026-07-12-access-level-checkbox-rows.md| new file mode 100644 |
| index 0000000..ded1f7b |
| --- /dev/null |
| +++ b/changelog/2026-07-12-access-level-checkbox-rows.md |
| @@ -0,0 +1,3 @@ |
| +🤖 Fixed a layout glitch in access levels: in the member picker (and the |
| +"Show on my profile" toggle), each checkbox had drifted to the opposite side |
| +of the row from the name it belongs to. They sit side by side again. |
diff --git a/web/static/apps/admin.js b/web/static/apps/admin.js| index 1765893..3f6f084 100644 |
| --- a/web/static/apps/admin.js |
| +++ b/web/static/apps/admin.js |
| @@ -686,6 +686,9 @@ export const app = defineApp({ |
| row.style.cssText = "display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer"; |
| const cb = document.createElement("input"); |
| cb.type = "checkbox"; |
| + // Escape the app-wide `input { width:100% }` rule, which would make the |
| + // checkbox a full-width flex item and shove the name to the far edge. |
| + cb.style.cssText = "width:18px;height:18px;flex:none;margin:0"; |
| cb.checked = selected.has(p.user_id); |
| cb.onchange = () => (cb.checked ? selected.add(p.user_id) : selected.delete(p.user_id)); |
| const l = document.createElement("span"); |
diff --git a/web/static/shell.js b/web/static/shell.js| index f4eac1e..9e2fe18 100644 |
| --- a/web/static/shell.js |
| +++ b/web/static/shell.js |
| @@ -9581,6 +9581,9 @@ function editProfile() { |
| "display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:8px;cursor:pointer"; |
| const cb = document.createElement("input"); |
| cb.type = "checkbox"; |
| + // Escape the app-wide `input { width:100% }` rule, which would make the |
| + // checkbox a full-width flex item and shove the label to the far edge. |
| + cb.style.cssText = "width:18px;height:18px;flex:none;margin:0"; |
| cb.checked = !tt.hidden; // hidden=true → currently NOT shown to others |
| cb.onchange = async () => { |
| cb.disabled = true; |