amadan
web: give command-panel dismiss buttons a visible, tappable ✕ (#1019)
The .cmd-panel-x button's inline SVG had no width/height CSS, so its icon rendered at zero size on every command panel (/gif, /emoji, etc.) — the only way to close one was Escape. Fixes #546.
2 files changed,
+7
−2
changelog/2026-07-15-command-panel-close-button.md+3 −0web/static/apps.js+4 −2
diff --git a/changelog/2026-07-15-command-panel-close-button.md b/changelog/2026-07-15-command-panel-close-button.md| new file mode 100644 |
| index 0000000..d5f6db3 |
| --- /dev/null |
| +++ b/changelog/2026-07-15-command-panel-close-button.md |
| @@ -0,0 +1,3 @@ |
| +🤖 Command panels (like the one `/gif` opens) now show a properly visible ✕ |
| +button to close them — previously the icon rendered at zero size, so the |
| +only way to dismiss a panel was the Escape key. |
diff --git a/web/static/apps.js b/web/static/apps.js| index a98ab8b..197b392 100644 |
| --- a/web/static/apps.js |
| +++ b/web/static/apps.js |
| @@ -92,9 +92,11 @@ injectStyles( |
| .cmd-panel-title { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| .cmd-panel-extra { flex: 0 0 auto; display: flex; align-items: center; } |
| .cmd-panel-x { |
| - flex: 0 0 auto; border: none; background: none; color: var(--muted); |
| - font-size: 16px; line-height: 1; padding: 2px 4px; cursor: pointer; border-radius: 6px; |
| + flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; |
| + border: none; background: none; color: var(--muted); |
| + font-size: 16px; line-height: 1; padding: 4px; cursor: pointer; border-radius: 6px; |
| } |
| +.cmd-panel-x svg { width: 16px; height: 16px; display: block; } |
| .cmd-panel-x:hover { color: var(--ink); background: var(--bubble-them); } |
| .cmd-panel-body { padding: 8px 14px 10px; max-height: 34vh; overflow-y: auto; } |
| /* The side placement: a full-height right column — a vertical sidebar for |