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

@@ -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 */

web/demo/demo.js

@@ -937,7 +937,9 @@
             modal.className = 'usmt-demo-modal';
             modal.innerHTML = `
                 <div class="usmt-demo-card" role="dialog" aria-labelledby="usmt-demo-title">
+                  <div class="usmt-demo-body">
                     <h2 id="usmt-demo-title">You're looking at a live demo</h2>
+                    <p class="usmt-demo-src">Source code: <a href="https://gitea.yoyos.sh/yoyos/usmt-dash" target="_blank" rel="noopener">gitea.yoyos.sh/yoyos/usmt-dash</a></p>
                     <p>This is the real dashboard, served by the real <code>USMT-Server.ps1</code> HttpListener and fed by the real
                        <code>USMT-Worker.ps1</code> polling loop, running in PowerShell 7 in a container. The only difference is the data
                        source: instead of SCCM, Active Directory and SMB, the worker talks to a simulated fleet of 200 devices whose
@@ -950,6 +952,7 @@
                        fleet &middot; add a device such as <code>PRVDT-7QK4M2XA</code> under <em>Tracked Devices</em> &middot;
                        click a device for its details &middot; <em>All Devices</em> shows apps missing from replacement machines &middot;
                        edit an article under <em>Documentation</em>.</p>
+                  </div>
                     <div class="usmt-demo-actions">
                         <button type="button" class="usmt-demo-reset">Reset my changes</button>
                         <button type="button" class="usmt-demo-terms">Open terminals</button>