From 214356310982976e3d95cab3931c4d0c2ada97e2 Mon Sep 17 00:00:00 2001 From: webtecnica <75556242+webtecnica@users.noreply.github.com> Date: Wed, 15 Jul 2026 18:30:06 -0300 Subject: [PATCH 1/3] fix: ensure approval/clarify popups have min-width on narrow screens (#6094) --- static/style.css | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/static/style.css b/static/style.css index 2b647fae..888291c6 100644 --- a/static/style.css +++ b/static/style.css @@ -3117,6 +3117,8 @@ .composer-mobile-config-panel.open{display:flex;} .composer-mobile-config-action{box-sizing:border-box;flex:1 1 0;min-height:44px;min-width:0;background:var(--input-bg);border-color:var(--border);} .composer-mobile-context-action{flex:1 0 100%;} + /* Keep the rich picker in the visual viewport when mobile browser chrome moves. */ + #composerModelDropdown{position:fixed;bottom:auto;box-sizing:border-box;min-width:0;width:calc(100vw - 16px);max-width:calc(100vw - 16px);z-index:220;} /* icon-only composer chips continue below mobile widths */ .composer-divider{display:none;} .composer-status{flex:0 1 auto;min-width:0;max-width:96px;font-size:10px;text-align:right;} @@ -3205,7 +3207,7 @@ .send-btn.visible{animation:none;opacity:1;transform:none;} /* Approval card */ .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);} + .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);min-width:min(100%,280px);} @supports (height:100dvh){.approval-inner{max-height:min(60dvh,420px);}} .approval-header{margin-bottom:8px;} .approval-collapse,.approval-dismiss{width:44px;height:44px;line-height:1;overflow:hidden;} @@ -3215,10 +3217,10 @@ .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);} + .clarify-card{padding-left:10px;padding-right:10px;overflow:visible;max-height:clamp(180px,min(62vh,calc(100vh - 180px)),360px);} .clarify-card .clarify-inner{max-height:clamp(180px,min(62vh,calc(100vh - 180px)),360px);} @supports (height:100dvh){.clarify-card,.clarify-card .clarify-inner{max-height:clamp(180px,min(62dvh,calc(100dvh - 180px)),360px);}} - .clarify-inner{padding:12px 12px 13px;} + .clarify-inner{padding:12px 12px 13px;min-width:min(100%,280px);} .clarify-response{flex-direction:column;align-items:stretch;} .clarify-input,.clarify-submit{width:100%;min-height:44px;} .clarify-choice{min-height:44px;} @@ -3246,6 +3248,10 @@ .ws-dropdown.open{display:block;} .ws-dropdown-footer{left:0;right:auto;bottom:calc(100% + 4px);min-width:280px;max-width:min(420px,calc(100vw - 32px));} .model-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;min-width:280px;max-width:min(420px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:min(70vh,640px);overflow-y:auto;} +/* Re-assert the mobile picker after the base dropdown rule below the phone media block. */ +@media (max-width:640px){ + #composerModelDropdown{position:fixed;bottom:auto;box-sizing:border-box;min-width:0;width:calc(100vw - 16px);max-width:calc(100vw - 16px);z-index:220;} +} .model-dropdown.open{display:block;} .model-scope-note{position:sticky;top:0;z-index:2;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-size:11px;font-weight:650;line-height:1.4;background:color-mix(in srgb,var(--surface) 82%,var(--accent-bg));box-shadow:0 1px 0 rgba(0,0,0,.12);} .model-group{padding:8px 14px 4px;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;border-top:1px solid var(--border2);margin-top:2px;}.model-group.collapsible{cursor:pointer;user-select:none}.model-group.collapsible:before{content:'\25b6';display:inline-block;font-size:8px;margin-right:5px;transition:transform .15s ease}.model-group.collapsible.open:before{transform:rotate(90deg)}.model-group-body:empty{display:none} @@ -4089,6 +4095,7 @@ body.resizing .sidebar{transition:none!important;} padding:1px 4px 1px 7px; margin-left:0; border-radius:0; + overflow:hidden; color:var(--muted); transition:background .18s ease,color .18s ease; } @@ -4147,6 +4154,13 @@ body.resizing .sidebar{transition:none!important;} @media (max-width:420px){ .transparent-event-time{ display:none; } } +/* Very narrow foldables (~280-360px): hide the tool name label so the + preview (the most informative part) doesn't get squeezed to zero. + The icon + preview + status is enough to identify the event, and + the full name is visible on expand/hover. (#6099) */ +@media (max-width:360px){ + .transparent-event-row .tool-card-name{ display:none; } +} .transparent-event-row .thinking-card-label{ display:inline; flex:0 0 auto; From 9ac68feecb53e9221335c9b9d94ddc7e9e256924 Mon Sep 17 00:00:00 2001 From: webtecnica <75556242+webtecnica@users.noreply.github.com> Date: Wed, 15 Jul 2026 18:31:51 -0300 Subject: [PATCH 2/3] fix: stream event timestamps layout on narrow foldable screens (#6099) --- static/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/static/style.css b/static/style.css index 2b647fae..e727ad4c 100644 --- a/static/style.css +++ b/static/style.css @@ -4091,6 +4091,7 @@ body.resizing .sidebar{transition:none!important;} border-radius:0; color:var(--muted); transition:background .18s ease,color .18s ease; + overflow:hidden; } .transparent-event-row .tool-card-header:hover, .transparent-event-row .thinking-card-header:hover{background:var(--hover-bg);color:var(--text);} @@ -4118,6 +4119,9 @@ body.resizing .sidebar{transition:none!important;} text-overflow:ellipsis; white-space:nowrap; } +@media (max-width:360px){ + .transparent-event-row .tool-card-name{display:none;} +} .transparent-event-row .tool-card-title, .transparent-event-row .tool-card-preview{ display:inline; From ee7ec5e5d7f349d07742ff041cb50d1bcd9eb395 Mon Sep 17 00:00:00 2001 From: nesquena-hermes Date: Thu, 16 Jul 2026 00:02:12 +0000 Subject: [PATCH 3/3] =?UTF-8?q?Release=20exp=20batch:=20narrow-screen=20CS?= =?UTF-8?q?S=20fixes=20=E2=80=94=20approval/clarify=20popup=20min-width=20?= =?UTF-8?q?(#6104)=20+=20stream-timestamp=20foldable=20layout=20(#6106).?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Scoped to the two stated fixes only: strips the #composerModelDropdown position:fixed mobile override that #6104's branch had bundled in (that's the #6080 model-picker mechanism, being reworked separately to reparent to body level — the fixed override is trapped by .composer-footer's container-type so it doesn't belong here), and drops the <=360px tool-name-hiding rules (header overflow-clip prevents the spill without losing tool identity). Thanks @webtecnica. --- CHANGELOG.md | 4 ++++ static/style.css | 16 ---------------- 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 92b6af2d..0ffa45aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -71,6 +71,10 @@ ### Fixed +- **Approval and clarify popups no longer collapse to tiny blank windows on very narrow screens.** On very narrow viewports the clarify card could shrink to an unreadable sliver; it now gets a `min-width` and `overflow:visible` matching the approval card. Thanks @webtecnica. (#6104, #6094) + +- **Stream event timestamps no longer break the row layout on narrow foldable screens.** On screens under 360px the per-event timestamps could spill out of tool/thinking card headers; the headers now clip overflow so the timestamp layout holds. (Tool names stay visible — an earlier draft hid them at ≤360px, which lost tool identity; the header clip alone prevents the spill.) Thanks @webtecnica. (#6106, #6099) + - **Streaming sidebar polls no longer re-run the expensive CLI/cron projection every few seconds.** The per-stream cache TTL was pinned at 30s while the frontend's streaming sidebar poll cadence could approach it, so the state.db CLI/cron projection (and its ~200 sidecar reads) could be re-paid on nearly every poll during a live turn (the #4842/#4808 high-CPU `get_cli_sessions` case). The streaming TTL is now held strictly above the sidebar poll interval (45s) and paired with the stable streaming cache key, so repeated polls reuse the projection; a new test asserts the TTL stays above the poll cadence so this can't silently regress. Thanks @starship-s. (#6102, #4842) - **Delegated subagent sessions in the sidebar now show a meaningful title instead of "Subagent Session".** Generic delegated child sessions previously all displayed the placeholder "Subagent Session" in the conversations list, making them indistinguishable. Their sidebar title is now derived (view-only) from the child's first user message during the existing batched sidebar-metadata pass — without mutating the stored session title, so the read-only boundary is preserved. Only generic "Subagent Session" placeholders are affected; custom titles are left untouched. Thanks @rodboev. (#6056, #6033) diff --git a/static/style.css b/static/style.css index 9f1a1c4c..b031db52 100644 --- a/static/style.css +++ b/static/style.css @@ -3117,8 +3117,6 @@ .composer-mobile-config-panel.open{display:flex;} .composer-mobile-config-action{box-sizing:border-box;flex:1 1 0;min-height:44px;min-width:0;background:var(--input-bg);border-color:var(--border);} .composer-mobile-context-action{flex:1 0 100%;} - /* Keep the rich picker in the visual viewport when mobile browser chrome moves. */ - #composerModelDropdown{position:fixed;bottom:auto;box-sizing:border-box;min-width:0;width:calc(100vw - 16px);max-width:calc(100vw - 16px);z-index:220;} /* icon-only composer chips continue below mobile widths */ .composer-divider{display:none;} .composer-status{flex:0 1 auto;min-width:0;max-width:96px;font-size:10px;text-align:right;} @@ -3248,10 +3246,6 @@ .ws-dropdown.open{display:block;} .ws-dropdown-footer{left:0;right:auto;bottom:calc(100% + 4px);min-width:280px;max-width:min(420px,calc(100vw - 32px));} .model-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;min-width:280px;max-width:min(420px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:min(70vh,640px);overflow-y:auto;} -/* Re-assert the mobile picker after the base dropdown rule below the phone media block. */ -@media (max-width:640px){ - #composerModelDropdown{position:fixed;bottom:auto;box-sizing:border-box;min-width:0;width:calc(100vw - 16px);max-width:calc(100vw - 16px);z-index:220;} -} .model-dropdown.open{display:block;} .model-scope-note{position:sticky;top:0;z-index:2;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-size:11px;font-weight:650;line-height:1.4;background:color-mix(in srgb,var(--surface) 82%,var(--accent-bg));box-shadow:0 1px 0 rgba(0,0,0,.12);} .model-group{padding:8px 14px 4px;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;border-top:1px solid var(--border2);margin-top:2px;}.model-group.collapsible{cursor:pointer;user-select:none}.model-group.collapsible:before{content:'\25b6';display:inline-block;font-size:8px;margin-right:5px;transition:transform .15s ease}.model-group.collapsible.open:before{transform:rotate(90deg)}.model-group-body:empty{display:none} @@ -4126,9 +4120,6 @@ body.resizing .sidebar{transition:none!important;} text-overflow:ellipsis; white-space:nowrap; } -@media (max-width:360px){ - .transparent-event-row .tool-card-name{display:none;} -} .transparent-event-row .tool-card-title, .transparent-event-row .tool-card-preview{ display:inline; @@ -4158,13 +4149,6 @@ body.resizing .sidebar{transition:none!important;} @media (max-width:420px){ .transparent-event-time{ display:none; } } -/* Very narrow foldables (~280-360px): hide the tool name label so the - preview (the most informative part) doesn't get squeezed to zero. - The icon + preview + status is enough to identify the event, and - the full name is visible on expand/hover. (#6099) */ -@media (max-width:360px){ - .transparent-event-row .tool-card-name{ display:none; } -} .transparent-event-row .thinking-card-label{ display:inline; flex:0 0 auto;