From 2600622af8c51bb7aed0cc4a9c7eaceaecb1bb15 Mon Sep 17 00:00:00 2001 From: hermes Date: Mon, 9 Nov 2026 21:14:33 +1000 Subject: [PATCH] fix(ui): dimmed backdrop and a bigger close button on the advice panel The panel read as floating in the page rather than sitting over it, and the close button was a 26px target - too small to hit reliably on a phone. The backdrop is a large spread shadow rather than a pseudo element, which would paint behind the panel's own background. Also: Escape closes the panel, clicking away closes it, and the button is a real button so it works with a keyboard. --- src/flask/static/css/app.css | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/flask/static/css/app.css b/src/flask/static/css/app.css index 7a050c9..fb6acd1 100644 --- a/src/flask/static/css/app.css +++ b/src/flask/static/css/app.css @@ -965,7 +965,12 @@ table.data .comment { color: var(--text-muted); font-size: .84rem; } font-size: 1.1rem; line-height: 1; cursor: pointer; - padding: 0 .15rem; + /* A 44px touch target, which is the smallest that is comfortable + on a phone. The negative margin pulls the panel's padding back + in so the button does not push the layout around, but the + padding is still what makes it easy to hit. */ + padding: .9rem; + margin: -.9rem -.9rem -.9rem 0; } .advice-pop__close:hover { @@ -993,6 +998,16 @@ table.data .comment { color: var(--text-muted); font-size: .84rem; } width: auto; } + /* A dimmed backdrop, so the panel reads as sitting over the page + rather than floating in it. + + A large spread shadow is used rather than a pseudo element, which + would paint behind the panel's own background. */ + .advice-pop { + box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55), + 0 12px 32px rgba(0, 0, 0, .55); + } + /* On a phone the panel is centred on the screen rather than anchored to the trigger - there is not the room to float it beside the cell, and the trigger may be near the edge. */