diff --git a/static/style.css b/static/style.css index a79cc614..dd842d90 100644 --- a/static/style.css +++ b/static/style.css @@ -721,7 +721,7 @@ .ctx-indicator.ctx-high .ctx-ring-value{stroke:var(--error);} .ctx-tooltip{position:absolute;right:0;bottom:calc(100% + 10px);min-width:210px;max-width:250px;padding:10px 12px;border:1px solid var(--border2);border-radius:12px;background:var(--surface);box-shadow:0 12px 30px rgba(0,0,0,.28);font-size:11px;line-height:1.45;color:var(--muted);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:30;} .ctx-tooltip::after{content:'';position:absolute;right:10px;top:100%;border-width:6px 6px 0 6px;border-style:solid;border-color:var(--surface) transparent transparent transparent;} - .ctx-indicator-wrap:hover .ctx-tooltip,.ctx-indicator-wrap:focus-within .ctx-tooltip{opacity:1;transform:translateY(0);} + .ctx-indicator-wrap:hover .ctx-tooltip,.ctx-indicator-wrap:focus-within .ctx-tooltip,.ctx-tooltip-active{opacity:1;transform:translateY(0);pointer-events:auto;} .ctx-tooltip-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:5px;} .ctx-tooltip-line+.ctx-tooltip-line{margin-top:3px;} .ctx-tooltip-compress{margin-top:8px;padding-top:8px;border-top:1px solid var(--border2);} diff --git a/static/ui.js b/static/ui.js index d9fd7144..6ba1554d 100644 --- a/static/ui.js +++ b/static/ui.js @@ -689,6 +689,30 @@ function _syncCtxIndicator(usage){ } } +// ── Touch support: toggle context tooltip on tap (#524) ── +// On mobile, hover doesn't work — allow tap on the context ring button +// to toggle the tooltip visibility so the compress affordance is reachable. +document.addEventListener('DOMContentLoaded',function(){ + const wrap=document.getElementById('ctxIndicatorWrap'); + const tooltip=document.getElementById('ctxTooltip'); + if(!wrap||!tooltip)return; + const btn=document.getElementById('ctxIndicator'); + if(!btn)return; + btn.addEventListener('click',function(e){ + e.stopPropagation(); + const isOpen=tooltip.classList.contains('ctx-tooltip-active'); + tooltip.classList.toggle('ctx-tooltip-active',!isOpen); + tooltip.setAttribute('aria-hidden',String(isOpen)); + }); + // Close on outside tap + document.addEventListener('click',function(){ + tooltip.classList.remove('ctx-tooltip-active'); + tooltip.setAttribute('aria-hidden','true'); + },{passive:true}); + // Prevent tooltip click from closing itself + tooltip.addEventListener('click',function(e){e.stopPropagation();}); +}); + function scrollIfPinned(){ if(!_scrollPinned) return; const el=$('messages');