ninja_hippo/card-grader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Pin modal close button top-right when the card name wraps

Browse source
This commit is contained in:
Barely Removable 2026-08-22 09:49:53 -07:00
parent 7f62e4ad7c
commit cc104e7e35
1 changed files with 10 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
static/style.css
View file

@ -319,7 +319,16 @@ textarea { resize: vertical; min-height: 64px; }
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
padding: 24px 26px 26px; padding: 24px 26px 26px;
} }
.modal .panel-head { margin-bottom: 14px; } /* The modal's heading is a card name and can run long. The shared
.panel-head wraps (which is right on the main panels, where a short title
sits beside a hint), but here wrapping drops the close button onto its own
line under the title. Pin it: title takes the slack, × stays top-right. */
.modal .panel-head {
flex-wrap: nowrap; align-items: flex-start; gap: 16px;
margin-bottom: 14px;
}
.modal .panel-head h2 { flex: 1; min-width: 0; }
.modal .close { flex: none; margin-top: 1px; }
.close { .close {
background: none; border: none; cursor: pointer; font-size: 24px; background: none; border: none; cursor: pointer; font-size: 24px;
color: var(--muted); line-height: 1; padding: 0 4px; border-radius: 6px; color: var(--muted); line-height: 1; padding: 0 4px; border-radius: 6px;