From 3a520d9ec7c6b4c25e7f03f109108a0208f2afe4 Mon Sep 17 00:00:00 2001
From: Mikhail Yenuchenko <public@mixeme.ru>
Date: Tue, 11 Aug 2026 23:15:37 +0300
Subject: [PATCH] panel: fix Assigned domains checkbox layout on user form

Form-wide block labels and full-width inputs stacked the box above the
domain name; checkbox rows now share label.check and fieldset spacing.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 CHANGELOG.md                               |  7 ++++
 internal/web/view/static/panel.css         | 38 +++++++++++++++-------
 internal/web/view/templates/user_form.html |  2 +-
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f0a2d3c..cd3eaaf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,13 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); version
 
 ## [Unreleased]
 
+### Fixed
+
+- panel: on the user create/edit form, **Assigned domains** checkboxes stacked
+  the box above the domain name (and stretched it full-width) because the form's
+  block-label and full-width input rules applied to them. Checkbox rows now use
+  the shared `label.check` layout; the fieldset has matching spacing.
+
 ## [1.2.1] - 2026-08-11
 
 Panel refinements after 1.2.0: navigation icons, status-badge centreing,
diff --git a/internal/web/view/static/panel.css b/internal/web/view/static/panel.css
index b8d878e..8140cab 100644
--- a/internal/web/view/static/panel.css
+++ b/internal/web/view/static/panel.css
@@ -174,10 +174,28 @@ h1 { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.01em; margin-top: 0
    is what centres the signed-out block on the page when there is no nav. */
 main:has(> .card.narrow) > * { max-width: 24rem; }
 label { display: block; font-weight: 600; margin: 0.9rem 0 0.3rem; }
+/* Checkbox rows (domain assignment, encrypt toggle) opt out of the block
+   label and full-width input rules above: the box and its caption sit on one
+   line. Without this the caption drops under a stretched checkbox. */
+label.check {
+  display: flex; align-items: center; gap: 0.5rem; margin: 0.45rem 0 0; font-weight: 600;
+  cursor: pointer;
+}
+label.check input { width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
 input {
   width: 100%; padding: 0.55rem 0.7rem; font-family: inherit; font-size: 1rem;
   border: 1px solid var(--control-border); border-radius: 5px; background: var(--input-bg); color: inherit;
 }
+/* Domain assignment on the user form: a bordered group under Role, not another
+   stacked field label. Legend replaces the usual label; the muted line is the
+   hint that used to sit where a field caption would. */
+fieldset {
+  margin: 0.9rem 0 0; padding: 0.55rem 0.85rem 0.85rem;
+  border: 1px solid var(--control-border); border-radius: 5px;
+}
+fieldset legend { padding: 0 0.25rem; font-weight: 600; }
+fieldset > .muted { margin: 0.15rem 0 0.35rem; font-size: 0.85rem; font-weight: 400; }
+fieldset > label.check:first-of-type { margin-top: 0.15rem; }
 /* One vocabulary for actions. Anything that performs an action looks like a
    button: a <button>, or an <a> carrying .btn/.danger where the action is a
    plain navigation (the delete confirmation page, the full queue view).
@@ -645,19 +663,15 @@ button.copy { flex: none; margin-top: 0.3rem; }
 }
 
 /* The optional "encrypt this download" block on the backup and export forms.
-   Its label is the one checkbox in the panel, so it opts out of the
-   block-level label rule above and sits on one line with its box; the fields it
-   reveals are indented under it to read as its consequence rather than as three
-   more fields of the form. panel.js hides the inner block until the box is
-   ticked (and empties it when unticked); without JavaScript everything stays
-   visible, which the server handles identically. The import form reuses the
-   same indented .encrypt-fields look for its password field, but reveals it
-   by file extension instead of a checkbox (see panel.js). */
+   The checkbox uses the shared label.check rule above; the fields it reveals
+   are indented under it to read as its consequence rather than as three more
+   fields of the form. panel.js hides the inner block until the box is ticked
+   (and empties it when unticked); without JavaScript everything stays visible,
+   which the server handles identically. The import form reuses the same
+   indented .encrypt-fields look for its password field, but reveals it by
+   file extension instead of a checkbox (see panel.js). */
 .encrypt { margin-top: 1.2rem; }
-.encrypt label.check {
-  display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 600;
-}
-.encrypt label.check input { width: auto; margin: 0; }
+.encrypt label.check { margin: 0; }
 .encrypt-fields {
   margin-top: 1.2rem; margin-left: 1.6rem; padding-left: 0.9rem;
   border-left: 2px solid var(--border);
diff --git a/internal/web/view/templates/user_form.html b/internal/web/view/templates/user_form.html
index a338578..2491d5d 100644
--- a/internal/web/view/templates/user_form.html
+++ b/internal/web/view/templates/user_form.html
@@ -25,7 +25,7 @@
       <legend>Assigned domains</legend>
       <p class="muted">Required for domain administrators.</p>
       {{range .Domains}}
-      <label class="checkbox">
+      <label class="check">
         <input type="checkbox" name="domain_ids" value="{{.ID}}" {{if index $.FormDomains .ID}}checked{{end}}>
         {{.Name}}
       </label>