hanna/fabrica

fix(web): title editor layout and trailing sidebar border

92bb98c · hanna committed on 2026-07-25

Move the title input and Save out of the <details> (Chromium's ::details-content
wrapper was stacking them) so they sit as siblings revealed by
:has(.issue-edit[open]): a full-width input with Cancel and Save inline. Drop the
border/padding on the last issue sidebar section, which drew a stray line.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k

assets/base.css +25 −20

crates/web/src/issues.rs +9 −6

data/repos/01/01kyc0j4dzrnx6afv3wwfvxgn4.git/logs/refs/heads/a +1 −0

data/repos/01/01kyc0j4dzrnx6afv3wwfvxgn4.git/objects/2a/0ab360e468d2288b0c8b73681027627acceb82 +0 −0

Binary file not shown.

data/repos/01/01kyc0j4dzrnx6afv3wwfvxgn4.git/objects/3b/18e512dba79e4c8300dd08aeb37f8e728b8dad +0 −0

Binary file not shown.

data/repos/01/01kyc0j4dzrnx6afv3wwfvxgn4.git/objects/54/c5187ee507a22c7b8de79a0ffb14722b3239f1 +0 −0

Binary file not shown.

data/repos/01/01kyc0j4dzrnx6afv3wwfvxgn4.git/refs/heads/a +1 −0

 .issue-title-line {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 0.5rem;
+}
-/* Hide the title while its editor is open (GitHub-style inline rename). */
-.issue-title-line:has(.issue-edit[open]) h1 {
-  display: none;
-}
-.issue-edit,
-.comment-edit {
-  flex: none;
-}
 .issue-edit > summary,
 .comment-edit > summary {
   cursor: pointer;
 .comment-edit[open] .edit-open {
   display: none;
+}
-/* Title editor: a full-width input with Cancel (the toggle) and Save beside it. */
+/* When closed, the Edit toggle sits at the right; the editor bits are hidden. */
-.issue-edit[open] {
+.issue-edit {
-  display: flex;
+  margin-left: auto;
-  align-items: center;
+}
-  gap: 0.5rem;
+.title-edit-form,
-  flex: 1 1 100%;
+.title-save {
+  display: none;
+}
-.issue-edit[open] > summary {
+/* Title editor (GitHub-style): a full-width input, then Cancel (the toggle) and
+   Save. The three are siblings of the title, revealed via :has. */
+.issue-title-line:has(.issue-edit[open]) h1 {
+  display: none;
+}
+.issue-title-line:has(.issue-edit[open]) .issue-edit {
   order: 2;
+  margin-left: 0;
+}
-.title-edit-form {
+.issue-title-line:has(.issue-edit[open]) .title-edit-form {
+  display: block;
   order: 1;
   flex: 1;
+}
+.issue-title-line:has(.issue-edit[open]) .title-save {
+  display: inline-flex;
+  order: 3;
+}
 .title-edit-form input[type="text"] {
   width: 100%;
+}
-.title-save {
-  order: 3;
-}
 /* Comment editor: the toggle sits in the header; when open the rendered body is
    replaced by the textarea. */
 .comment-edit {
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--fb-border);
+}
+.issue-side section:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
 .issue-side h3 {
   font-size: 0.9rem;
   margin-bottom: 0.5rem;

 /// shows a full-width single-line input with Cancel (the toggle) and Save beside
 /// it, GitHub-style. (The description is edited from its own comment card.)
 pub(crate) fn edit_issue_form(issue: &Issue, csrf: &str) -> Markup {
+    // The toggle, the input form, and Save are siblings of the title (not nested
+    // in the <details>), so `:has(.issue-edit[open])` can reveal them without
+    // hitting the ::details-content wrapper that would stack them.
     let form_id = format!("title-edit-{}", issue.id);
     html! {
         details class="issue-edit" {
                 span class="edit-open" { "Edit" }
                 span class="edit-close" { "Cancel" }
+            }
-            form id=(form_id) class="title-edit-form" method="post"
-                 action=(format!("/issue/{}/edit-title", issue.id)) {
-                input type="hidden" name="_csrf" value=(csrf);
-                input type="text" name="title" value=(issue.title) aria-label="Title" required;
-            }
-            button class="btn btn-primary title-save" type="submit" form=(form_id) { "Save" }
+        }
+        form id=(form_id) class="title-edit-form" method="post"
+             action=(format!("/issue/{}/edit-title", issue.id)) {
+            input type="hidden" name="_csrf" value=(csrf);
+            input type="text" name="title" value=(issue.title) aria-label="Title" required;
+        }
+        button class="btn btn-primary title-save" type="submit" form=(form_id) { "Save" }
+    }
+}

@@ -0,0 +1 @@
		1	0000000000000000000000000000000000000000 54c5187ee507a22c7b8de79a0ffb14722b3239f1 hanna <me@hanna.lol> 1785019980 -0400 push