Fix #169: persistent full-width divider between dropdown head and body

The line between the editor head (dropdown/title area) and the editor
body only showed as the cards' own borders inside rounded corners and
read as hover-dependent and flickering. Draw an always-visible separator
that spans the full card width: border-bottom on the head card and
border-top on the editor card, with square corners on the facing edges
so the two form one continuous line. CSS only in app.css; no inline
styles or scripts, CSP unchanged.
This commit is contained in:
fen
2026-09-10 11:43:52 -05:00
parent 02fcb80b6d
commit 542d98e4d9
+17
View File
@@ -811,3 +811,20 @@ button[type="submit"]:focus-visible,
.mt18 { margin-top: 18px; } .mt18 { margin-top: 18px; }
.toggle-inline { display: inline-flex; } .toggle-inline { display: inline-flex; }
.wrap-normal { word-break: normal; overflow-wrap: break-word; } .wrap-normal { word-break: normal; overflow-wrap: break-word; }
/* #169: persistent full-width divider between the editor head (dropdown
title area) and the editor body. Previously the perceived line was only
the two cards' own borders, which sat inside rounded corners and read as
a hover-dependent, flickering line. Draw one continuous separator that
spans the full card width and is always visible: border-bottom on the
head card, border-top on the editor card, square corners on the facing
edges so the two connect into a single unbroken line. */
.pane-l-head {
border-bottom: 1px solid var(--border);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.pane-l-head + .editor-wrap {
border-top: 1px solid var(--border);
border-top-left-radius: 0;
border-top-right-radius: 0;
}