Fix dashboard footer action clicks

Author: yelixir-dev

src/dashboard.ts

@@ -22,7 +22,7 @@ export function dashboardHtml(initialConfig: unknown = null): string {
     *{box-sizing:border-box} body{margin:0;background:linear-gradient(180deg,var(--paper),#cfc6b2);color:var(--ink);font-family:var(--sans);font-size:14px;}
     body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(62,58,50,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(62,58,50,.12) 1px,transparent 1px);background-size:18px 18px;mix-blend-mode:multiply;}
     .wrap{position:relative;z-index:1;width:min(100%,1040px);margin:0 auto;padding:12px 10px 80px}.top{display:flex;gap:6px;align-items:flex-start;justify-content:space-between;margin-bottom:10px}.brand{border-top:2px solid var(--ink);padding-top:8px;min-width:0}.eyebrow{display:inline-block;font:700 11px/1 var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;text-decoration:none}.eyebrow:hover{color:var(--ink)}.brand h1{font-size:19px;line-height:1.05;margin:6px 0 0;letter-spacing:-.055em;white-space:nowrap}.status{min-width:96px;text-align:right;font-family:var(--mono);font-size:11px}.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#d8cfbb;padding:5px 7px}.dot{width:8px;height:8px;border-radius:99px;background:var(--disabled)}.dot.on{background:var(--good)}.dot.off{background:var(--bad)}
-    .grid{display:grid;grid-template-columns:1fr;gap:10px}.bind-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(92px,1fr);gap:8px;align-items:end}.bridge-key{margin:8px 0 0}.bridge-key-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;align-items:center}.bridge-key-prefix{min-height:38px;display:inline-flex;align-items:center;border:1px solid var(--line);border-right:0;background:#d8cfbb;padding:0 8px;font-family:var(--mono);font-weight:700}.bridge-key-row input{min-width:0;border-left:0}.bridge-key-help-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;margin-top:6px}.bridge-key-help{font:700 11px/1.2 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bridge-key-help-row button{min-height:34px;min-width:36px;padding:5px 8px}.concurrency-row .info{justify-self:end;margin-right:10px}.card{background:#c9bfaa;border:1px solid var(--line);box-shadow:inset 0 1px rgba(255,255,255,.32);padding:10px}.card h2{display:flex;align-items:center;justify-content:space-between;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px;border-bottom:1px solid var(--line);padding-bottom:6px}.sub{color:var(--muted);font-size:12px}.row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:6px 0}.stack{display:grid;gap:7px}.field{display:grid;gap:4px}.field label{font:700 10px/1 var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}input,select,button{font:inherit}input,select{width:100%;min-height:38px;border:1px solid var(--line);background:#ddd4c0;color:var(--ink);padding:8px}button{min-height:40px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:8px 10px;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:700}button.secondary{background:#d8cfbb;color:var(--ink);border-color:var(--line)}button.danger{background:var(--bad);border-color:var(--bad)}button:disabled{background:var(--disabled);border-color:var(--disabled);opacity:.55}.seg{display:grid;grid-template-columns:1fr;gap:6px}.one-line-field{display:flex;gap:8px;align-items:center;margin-top:8px}.one-line-field label{font-weight:700;white-space:nowrap}.one-line-field input{width:74px;text-align:right}.concurrency-row{display:grid;grid-template-columns:auto 74px auto 1fr auto;gap:8px;align-items:center}.concurrency-spacer{min-width:0}.info{position:relative;font-size:16px;line-height:1;cursor:help;color:var(--muted);display:inline-flex}.info .tip{display:none;position:absolute;right:0;top:24px;z-index:5;width:min(72vw,320px);border:1px solid var(--line);background:#e0d7c3;color:var(--ink);box-shadow:0 8px 18px rgba(48,45,39,.22);padding:8px;font:12px/1.45 var(--sans)}.info:hover .tip,.info:focus .tip{display:block}.policy{position:relative;border:1px solid var(--line);padding:9px 10px;background:#d8cfbb;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.policy input{width:auto;min-height:0}.policy b{display:block;font-size:13px}.kv{display:grid;grid-template-columns:1fr auto;gap:4px;font-family:var(--mono);font-size:11px;border-bottom:1px dashed rgba(80,72,60,.35);padding:4px 0}.model,.cred{border:1px solid var(--line);background:#d8cfbb;padding:8px;display:grid;gap:7px}.cred-name{min-height:34px;font-weight:700;background:#d8cfbb}.model-head,.cred-head{display:flex;gap:8px;align-items:center;justify-content:space-between}.switch{position:relative;width:48px;height:26px;flex:0 0 auto}.switch input{display:none}.slider{position:absolute;inset:0;border:1px solid var(--line);background:var(--disabled)}.slider:before{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;background:var(--paper)}.switch input:checked+.slider{background:var(--good)}.switch input:checked+.slider:before{transform:translateX(22px)}.footerbar{position:fixed;left:0;right:0;bottom:0;background:rgba(48,45,39,.96);border-top:1px solid var(--line);padding:8px 10px;display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;z-index:2}.restart.active{background:#d9b95f;color:var(--ink);border-color:#d9b95f}.small{font-size:11px;color:var(--muted)}.token{font-family:var(--mono);font-size:11px;color:var(--paper)}.toast{position:fixed;left:10px;right:10px;bottom:68px;background:var(--ink);color:var(--paper);padding:10px;transform:translateY(120%);transition:.2s;z-index:3}.toast.show{transform:translateY(0)}
+    .grid{display:grid;grid-template-columns:1fr;gap:10px}.bind-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(92px,1fr);gap:8px;align-items:end}.bridge-key{margin:8px 0 0}.bridge-key-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;align-items:center}.bridge-key-prefix{min-height:38px;display:inline-flex;align-items:center;border:1px solid var(--line);border-right:0;background:#d8cfbb;padding:0 8px;font-family:var(--mono);font-weight:700}.bridge-key-row input{min-width:0;border-left:0}.bridge-key-help-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;margin-top:6px}.bridge-key-help{font:700 11px/1.2 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bridge-key-help-row button{min-height:34px;min-width:36px;padding:5px 8px}.concurrency-row .info{justify-self:end;margin-right:10px}.card{background:#c9bfaa;border:1px solid var(--line);box-shadow:inset 0 1px rgba(255,255,255,.32);padding:10px}.card h2{display:flex;align-items:center;justify-content:space-between;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px;border-bottom:1px solid var(--line);padding-bottom:6px}.sub{color:var(--muted);font-size:12px}.row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:6px 0}.stack{display:grid;gap:7px}.field{display:grid;gap:4px}.field label{font:700 10px/1 var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}input,select,button{font:inherit}input,select{width:100%;min-height:38px;border:1px solid var(--line);background:#ddd4c0;color:var(--ink);padding:8px}button{min-height:40px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:8px 10px;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:700}button.secondary{background:#d8cfbb;color:var(--ink);border-color:var(--line)}button.danger{background:var(--bad);border-color:var(--bad)}button:disabled{background:var(--disabled);border-color:var(--disabled);opacity:.55}.seg{display:grid;grid-template-columns:1fr;gap:6px}.one-line-field{display:flex;gap:8px;align-items:center;margin-top:8px}.one-line-field label{font-weight:700;white-space:nowrap}.one-line-field input{width:74px;text-align:right}.concurrency-row{display:grid;grid-template-columns:auto 74px auto 1fr auto;gap:8px;align-items:center}.concurrency-spacer{min-width:0}.info{position:relative;font-size:16px;line-height:1;cursor:help;color:var(--muted);display:inline-flex}.info .tip{display:none;position:absolute;right:0;top:24px;z-index:5;width:min(72vw,320px);border:1px solid var(--line);background:#e0d7c3;color:var(--ink);box-shadow:0 8px 18px rgba(48,45,39,.22);padding:8px;font:12px/1.45 var(--sans)}.info:hover .tip,.info:focus .tip{display:block}.policy{position:relative;border:1px solid var(--line);padding:9px 10px;background:#d8cfbb;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.policy input{width:auto;min-height:0}.policy b{display:block;font-size:13px}.kv{display:grid;grid-template-columns:1fr auto;gap:4px;font-family:var(--mono);font-size:11px;border-bottom:1px dashed rgba(80,72,60,.35);padding:4px 0}.model,.cred{border:1px solid var(--line);background:#d8cfbb;padding:8px;display:grid;gap:7px}.cred-name{min-height:34px;font-weight:700;background:#d8cfbb}.model-head,.cred-head{display:flex;gap:8px;align-items:center;justify-content:space-between}.switch{position:relative;width:48px;height:26px;flex:0 0 auto}.switch input{display:none}.slider{position:absolute;inset:0;border:1px solid var(--line);background:var(--disabled)}.slider:before{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;background:var(--paper)}.switch input:checked+.slider{background:var(--good)}.switch input:checked+.slider:before{transform:translateX(22px)}.footerbar{position:fixed;left:0;right:0;bottom:0;background:rgba(48,45,39,.96);border-top:1px solid var(--line);padding:8px 10px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;z-index:30}.restart.active{background:#d9b95f;color:var(--ink);border-color:#d9b95f}.small{font-size:11px;color:var(--muted)}.token{font-family:var(--mono);font-size:11px;color:var(--paper)}.toast{position:fixed;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom));background:var(--ink);color:var(--paper);padding:10px;transform:translateY(120%);transition:.2s;z-index:20;pointer-events:none}.toast.show{transform:translateY(0)}
     @media(max-width:360px){.brand h1{font-size:17px}.status{min-width:88px}}
     @media(min-width:760px){.wrap{padding:22px 18px 90px}.grid{grid-template-columns:1.1fr .9fr}.wide{grid-column:1/-1}.brand h1{font-size:27px}.models{grid-template-columns:repeat(3,1fr);display:grid}.creds{grid-template-columns:repeat(2,1fr);display:grid}.top{align-items:center}}
   </style>

tests/dashboard-ui.test.ts

@@ -74,4 +74,19 @@ describe("dashboard UI", () => {
     expect(html).toContain("data-cenabled");
     expect(html.indexOf("data-cenabled")).toBeLessThan(html.indexOf("data-del"));
   });
+
+  it("keeps toast notifications from blocking the floating save/restart bar", () => {
+    const html = dashboardHtml({
+      server: { host: "127.0.0.1", port: 9992 },
+      routing: { policy: "daily_burn_priority", maxInFlightPerCredential: 4 },
+      credentials: [],
+      models: [],
+    });
+
+    expect(html).toContain(".footerbar{position:fixed");
+    expect(html).toContain("z-index:30");
+    expect(html).toContain(".toast{position:fixed");
+    expect(html).toContain("z-index:20;pointer-events:none");
+    expect(html).toContain("env(safe-area-inset-bottom)");
+  });
 });