From 8d01268cdabce722372fc558b06bfdbf2a0e10f5 Mon Sep 17 00:00:00 2001 From: wsp Date: Wed, 29 Jul 2026 22:47:02 +0800 Subject: [PATCH] fix(flow-chat): unify virtual item content width - Constrain all top-level FlowChat items to the centered 900px content column. - Align content-sized user messages with assistant output and the chat input. - Let explore groups inherit the shared wrapper width instead of duplicating layout constraints. - Remove obsolete wide-screen wrapper breakpoints. --- .../src/flow_chat/components/modern/ExploreRegion.scss | 6 +----- .../components/modern/VirtualItemRenderer.scss | 10 +--------- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss b/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss index 94c581b79..6b956f72e 100644 --- a/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss +++ b/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss @@ -2,10 +2,6 @@ .explore-region { position: relative; - box-sizing: border-box; - width: min(100%, 900px); - margin-left: auto; - margin-right: auto; overflow: hidden; padding: 0 var(--flowchat-content-inline-pad); @@ -17,7 +13,7 @@ // ==================== Collapsible (header + animated content) ==================== .explore-region--collapsible { - margin: 0 auto 0.3rem; + margin: 0 0 0.3rem; font-size: var(--flowchat-font-size-sm); line-height: var(--flowchat-support-line-height); diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss index a1dd62f67..6e951da8d 100644 --- a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss +++ b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss @@ -5,20 +5,12 @@ .virtual-item-wrapper { width: 100%; - max-width: 1200px; + max-width: 900px; margin: 0 auto; box-sizing: border-box; min-height: 1px; padding: 0; - @media (max-width: 1400px) { - max-width: 1000px; - } - - @media (max-width: 1200px) { - max-width: 900px; - } - @media (max-width: 768px) { max-width: 100%; }