Sabo/webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: three UI glitches -- image error, CLI badge overlap, dropdown z-index

Browse Source 
1. Image preview onerror fires on clearPreview (#68)
   clearPreview() set previewImg.src='' which triggered the stale onerror
   handler, showing 'Could not load image' on every refresh/message.
   Fix: null out onerror before clearing src.

2. CLI session badge covers delete button (#69)
   The ::after 'cli' label occupied the same space as the hover-revealed
   .session-actions overlay, making delete unreachable.
   Fix: add padding-right to .cli-session, use margin-left:auto to push
   badge right, add pointer-events:none so clicks pass through.

3. Tool cards visible through profile dropdown
   The .messages container had no stacking context, so tool cards could
   render above the profile dropdown (z-index:200).
   Fix: add position:relative;z-index:0 to .messages to establish a
   stacking context that keeps all children below overlays.

Closes #68, closes #69

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nathan Esquenazi
2026-04-04 09:09:31 -07:00
parent 90b5ad8d99
commit 6a4b20f3f2
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/boot.js
View File

@@ -169,7 +169,7 @@ $('importFileInput').onchange=async(e)=>{
// btnRefreshFiles is now panel-icon-btn in header (see HTML) // btnRefreshFiles is now panel-icon-btn in header (see HTML)
function clearPreview(){ function clearPreview(){
const pa=$('previewArea');if(pa)pa.classList.remove('visible'); const pa=$('previewArea');if(pa)pa.classList.remove('visible');
const pi=$('previewImg');if(pi)pi.src=''; const pi=$('previewImg');if(pi){pi.onerror=null;pi.src='';}
const pm=$('previewMd');if(pm)pm.innerHTML=''; const pm=$('previewMd');if(pm)pm.innerHTML='';
const pc=$('previewCode');if(pc)pc.textContent=''; const pc=$('previewCode');if(pc)pc.textContent='';
const pp=$('previewPathText');if(pp)pp.textContent=''; const pp=$('previewPathText');if(pp)pp.textContent='';

6
static/style.css
View File

@@ -129,7 +129,7 @@
.topbar-chips{display:flex;gap:6px;align-items:center;flex-shrink:0;} .topbar-chips{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.chip{font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,.1);color:var(--muted);font-weight:500;} .chip{font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,.1);color:var(--muted);font-weight:500;}
.chip.model{color:var(--blue);border-color:rgba(124,185,255,0.35);background:rgba(124,185,255,0.1);} .chip.model{color:var(--blue);border-color:rgba(124,185,255,0.35);background:rgba(124,185,255,0.1);}
.messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;} .messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;position:relative;z-index:0;}
.messages-inner{max-width:800px;margin:0 auto;width:100%;padding:20px 24px 32px;display:flex;flex-direction:column;} .messages-inner{max-width:800px;margin:0 auto;width:100%;padding:20px 24px 32px;display:flex;flex-direction:column;}
.msg-row{padding:10px 0;} .msg-row{padding:10px 0;}
.msg-row+.msg-row{border-top:none;} .msg-row+.msg-row{border-top:none;}
@@ -692,6 +692,7 @@ body.resizing{user-select:none;cursor:col-resize;}
/* ── CLI session items in sidebar ── */ /* ── CLI session items in sidebar ── */
.session-item.cli-session { .session-item.cli-session {
border-left-color: var(--gold); border-left-color: var(--gold);
padding-right: 36px; /* make room for session-actions overlay */
} }
.session-item.cli-session::after { .session-item.cli-session::after {
content: 'cli'; content: 'cli';
@@ -701,6 +702,7 @@ body.resizing{user-select:none;cursor:col-resize;}
letter-spacing: .04em; letter-spacing: .04em;
color: var(--gold); color: var(--gold);
opacity: .5; opacity: .5;
margin-left: 4px; margin-left: auto;
flex-shrink: 0; flex-shrink: 0;
pointer-events: none; /* don't block clicks on session-actions beneath */
} }