From 486b57cacb5f2d8d3d8fc52241e2b2ff1601ef55 Mon Sep 17 00:00:00 2001 From: Johan Sandoval Date: Wed, 7 Oct 2026 18:46:44 +0000 Subject: [PATCH] Demo popup: link the source repo, keep the buttons pinned on screen The popup text now scrolls inside the card while the buttons stay at the bottom, so phone visitors see 'Explore the dashboard' right away (it goes first and full width on narrow screens). The card height uses dvh so the top edge isn't cut off behind a phone's address bar. --- web/demo/demo.css | 21 +++++++++++++++++---- web/demo/demo.js | 3 +++ 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/web/demo/demo.css b/web/demo/demo.css index fd711db..f67f082 100644 --- a/web/demo/demo.css +++ b/web/demo/demo.css @@ -90,16 +90,27 @@ align-items: center; justify-content: center; padding: 16px; } .usmt-demo-modal.show { display: flex; } +/* The text scrolls inside the card and the buttons stay pinned at the bottom, so the + "Explore the dashboard" button is always on screen (phones included). dvh follows the + visible area when a phone's address bar is showing, so the top edge isn't cut off. */ .usmt-demo-card { background: var(--bg-card, #fff); color: var(--text-main, #333); max-width: 640px; width: 100%; - max-height: calc(100vh - 32px); overflow: auto; border-radius: 10px; padding: 26px 28px; + max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); + display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.45); border-top: 5px solid #f59e0b; line-height: 1.55; } -.usmt-demo-card h2 { margin: 0 0 10px; } +.usmt-demo-body { overflow-y: auto; min-height: 0; padding: 22px 28px 4px; } +.usmt-demo-card h2 { margin: 0 0 4px; } +.usmt-demo-card p.usmt-demo-src { font-size: 0.85em; margin-bottom: 14px; color: var(--text-muted, #666); } +.usmt-demo-src a { color: #3498db; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; } +.usmt-demo-src a:hover { text-decoration: underline; } .usmt-demo-card p { margin: 0 0 12px; font-size: 0.95em; } .usmt-demo-card code { background: rgba(127,127,127,0.18); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; } .usmt-demo-try { color: var(--text-muted, #666); } -.usmt-demo-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; } +.usmt-demo-actions { + display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; flex-shrink: 0; + padding: 14px 28px 18px; border-top: 1px solid var(--border-color, #ddd); +} .usmt-demo-actions button { border: 1px solid var(--border-color, #ddd); background: transparent; color: inherit; padding: 8px 14px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 0.9em; } .usmt-demo-actions .usmt-demo-close { background: #3498db; border-color: #3498db; color: #fff; font-weight: 600; } .usmt-demo-actions .usmt-demo-reset { color: #e74c3c; border-color: #e74c3c; margin-right: auto; } @@ -113,10 +124,12 @@ .usmt-term { --usmt-term-h: 45vh; } .usmt-term-body { font-size: 11.5px; padding: 6px 8px 10px 14px; } .usmt-term-titlebar { font-size: 0.7em; } - .usmt-demo-card { padding: 18px 16px; } + .usmt-demo-body { padding: 16px 16px 4px; } .usmt-demo-card h2 { font-size: 1.25em; } + .usmt-demo-actions { padding: 12px 16px 14px; gap: 8px; } .usmt-demo-actions button { flex: 1 1 auto; } .usmt-demo-actions .usmt-demo-reset { margin-right: 0; } + .usmt-demo-actions .usmt-demo-close { order: -1; flex-basis: 100%; padding: 11px 14px; } /* first and full width */ } @media (max-height: 500px) { .usmt-term { --usmt-term-h: 55vh; } /* phones in landscape */ diff --git a/web/demo/demo.js b/web/demo/demo.js index 81edbf0..936379c 100644 --- a/web/demo/demo.js +++ b/web/demo/demo.js @@ -937,7 +937,9 @@ modal.className = 'usmt-demo-modal'; modal.innerHTML = `