David/HERMES-GIELIE
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge #5019 (disco32r mobile touch targets) into stage

Browse source
This commit is contained in:
nesquena-hermes 2026-06-30 18:54:36 +00:00
commit 61cc0d167b
2 changed files with 36 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
static/style.css
View file

@ -2820,10 +2820,9 @@
.sidebar.mobile-open{transform:translateX(0);}
.sidebar .resize-handle{display:none;}
/* Hamburger button (in app titlebar on mobile) */
.app-titlebar{justify-content:space-between;}
.app-titlebar{height:52px;justify-content:space-between;}
.app-titlebar-hamburger,.app-titlebar-spacer{display:flex;}
.app-titlebar-new-chat{display:inline-flex;}
.app-titlebar-reload{display:inline-flex;}
.app-titlebar-new-chat,.app-titlebar-reload{display:inline-flex;width:44px;height:44px;}
.app-titlebar-inner{flex:1 1 auto;}
.system-health-panel.insights-card{gap:10px;padding:12px;}
.system-health-head{align-items:flex-start;}
@ -2834,7 +2833,10 @@
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
z-index:199;-webkit-tap-highlight-color:transparent;}
.mobile-overlay.visible{display:none;}
.pwa-sidebar-edge-guard{display:block;position:fixed;left:0;top:calc(38px + var(--app-titlebar-safe-top));bottom:0;width:24px;z-index:198;background:transparent;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
/* Keep edge guard aligned with the mobile titlebar's effective 52px height.
If this rule or app-titlebar sizing changes, update both together to
avoid accidental sidebar swipe collisions. */
.pwa-sidebar-edge-guard{display:block;position:fixed;left:0;top:calc(52px + var(--app-titlebar-safe-top));bottom:0;width:24px;z-index:198;background:transparent;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
/* Files button in topbar */
.workspace-toggle-btn,.mobile-files-btn{display:inline-flex!important;}
/* Right panel: slide-over from right */
@ -2936,10 +2938,24 @@
.sidebar-nav .dashboard-link.dashboard-link-visible{display:none!important;}
.sidebar .panel-view{height:100%;margin-left:52px;}
.sidebar .panel-head{padding-right:52px;}
.mobile-sidebar-close{display:inline-flex!important;position:absolute;right:10px;top:calc(8px + var(--app-titlebar-safe-top));width:32px;height:32px;z-index:4;background:var(--surface);border:1px solid var(--border);}
.mobile-sidebar-close{display:inline-flex!important;position:absolute;right:4px;top:calc(4px + var(--app-titlebar-safe-top));width:44px;height:44px;z-index:4;background:var(--surface);border:1px solid var(--border);}
.sidebar .panel-icon-btn{min-width:44px;min-height:44px;width:auto;height:auto;}
/* Touch targets — minimum 44px */
.icon-btn,.mic-btn,.voice-mode-btn{min-width:44px;min-height:44px;}
.app-titlebar-hamburger,
.app-titlebar-new-chat,
.app-titlebar-reload,
.mobile-sidebar-close,
.sidebar-nav .nav-tab,
.icon-btn,
.send-btn{line-height:1;overflow:hidden;}
.app-titlebar-hamburger svg,
.app-titlebar-new-chat svg,
.app-titlebar-reload svg,
.mobile-sidebar-close svg,
.sidebar-nav .nav-tab svg,
.icon-btn svg,
.send-btn svg{display:block;flex:0 0 auto;}
.session-item{min-height:44px;padding:10px 40px 10px 12px;}
.session-item.streaming,.session-item.unread{padding-right:40px;}
.session-actions{opacity:1;pointer-events:auto;}
@ -2969,10 +2985,21 @@
}
@media (max-width: 640px){
.panel-head-btn.mobile-sidebar-close{display:inline-flex!important;right:4px;top:calc(4px + var(--app-titlebar-safe-top));width:44px!important;height:44px!important;min-width:44px;min-height:44px;line-height:1;overflow:hidden;}
.panel-head-btn.mobile-sidebar-close svg{width:18px;height:18px;display:block;}
/* Keep mobile send-button reveal motion off: avoids 0.18s pop-in in tight composer layouts,
which can jitter the 44px hit area while typing/scrolling. */
.send-btn.visible{animation:none;opacity:1;transform:none;}
/* Approval card */
.approval-card{padding-left:10px;padding-right:10px;}
.approval-btns{gap:6px;}
.approval-btn{padding:8px 12px;font-size:12px;min-height:44px;}
.approval-card{padding-left:10px;padding-right:10px;bottom:8px;overflow:visible;}
.approval-inner{max-height:min(52vh,360px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px 12px 14px;border-radius:12px;box-shadow:0 -10px 30px rgba(0,0,0,.24);}
@supports (height:100dvh){.approval-inner{max-height:min(52dvh,360px);}}
.approval-header{margin-bottom:8px;}
.approval-collapse,.approval-dismiss{width:44px;height:44px;line-height:1;overflow:hidden;}
.approval-cmd{max-height:86px;margin-bottom:10px;}
.approval-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.approval-btn{justify-content:center;padding:8px 10px;font-size:12px;min-height:44px;min-width:0;line-height:1.2;}
.approval-btn.yolo{grid-column:1 / -1;}
.approval-kbd{display:none;}
/* Clarify card */
.clarify-card{padding-left:10px;padding-right:10px;max-height:clamp(180px,min(62vh,calc(100vh - 180px)),360px);}

2
tests/test_mobile_layout.py
View file

@ -470,7 +470,7 @@ def test_mobile_sidebar_edge_guard_claims_body_edge_only():
assert guard.get("display") == "block"
assert guard.get("position") == "fixed"
assert guard.get("left") == "0"
assert guard.get("top") == "calc(38px + var(--app-titlebar-safe-top))", (
assert guard.get("top") == "calc(52px + var(--app-titlebar-safe-top))", (
"edge guard should start below the PWA titlebar so it does not block hamburger"
)
assert guard.get("width") == "24px"