From b69631cb3521ae3bf75ab5887be8755d0a664bb6 Mon Sep 17 00:00:00 2001 From: Kyle Carberry Date: Mon, 16 Mar 2026 18:36:37 -0400 Subject: [PATCH] chore(site): improve mobile layout for agent chat (#23139) --- site/src/pages/AgentsPage/AgentChatInput.tsx | 5 ++- .../AgentDetail/ConversationTimeline.tsx | 32 +++++++++++-------- site/src/pages/AgentsPage/AgentDetailView.tsx | 2 +- 3 files changed, 22 insertions(+), 17 deletions(-) diff --git a/site/src/pages/AgentsPage/AgentChatInput.tsx b/site/src/pages/AgentsPage/AgentChatInput.tsx index 9365da94e3..ec4a394d6e 100644 --- a/site/src/pages/AgentsPage/AgentChatInput.tsx +++ b/site/src/pages/AgentsPage/AgentChatInput.tsx @@ -563,7 +563,7 @@ export const AgentChatInput = memo( const sendButtonLabel = editingQueuedMessageID !== null ? "Save" : "Send"; const content = ( -
+
{queuedMessages.length > 0 && ( ( ref={setRef} onFilePaste={onAttach ? handleFilePaste : undefined} aria-label="Chat message" - className="min-h-[120px] w-full resize-none bg-transparent px-3 py-2 font-sans text-[15px] leading-6 text-content-primary placeholder:text-content-secondary disabled:cursor-not-allowed disabled:opacity-70" + className="min-h-[60px] sm:min-h-24 w-full resize-none bg-transparent px-3 py-2 font-sans text-[15px] leading-6 text-content-primary placeholder:text-content-secondary disabled:cursor-not-allowed disabled:opacity-70" placeholder={placeholder} initialValue={initialValue} onChange={handleContentChange} onEnter={handleSubmit} disabled={isDisabled || isLoading} - rows={4} autoFocus />
diff --git a/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx b/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx index eff6c3d9b9..c9be9f9dcd 100644 --- a/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx +++ b/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx @@ -652,7 +652,10 @@ const StickyUserMessage: FC<{ const scroller = sentinel.closest(".overflow-y-auto") as HTMLElement | null; if (!scroller) return; - const MIN_HEIGHT = 72; + // Halve the minimum visible height on mobile so the + // sticky message takes up less vertical space. + const isMobile = window.matchMedia("(max-width: 639px)").matches; + const MIN_HEIGHT = isMobile ? 52 : 72; let scrollerTop = scroller.getBoundingClientRect().top; let scrollerHeight = scroller.clientHeight; @@ -766,7 +769,7 @@ const StickyUserMessage: FC<{
{/* Blur layer: extends 48px beyond the - clipped content so the frosted effect - is visible around the bubble. Promoted - to its own GPU layer via will-change. */} + clipped content so the frosted effect + is visible around the bubble. A mask + gradient fades the backdrop-blur out + gradually instead of a hard cutoff. + Promoted to its own GPU layer via + will-change. */}
- {/* Content layer: px-3 pt-2 matches the - sticky container's padding so the - overlay aligns with the flow element. - will-change promotes to GPU layer. */} + {/* Content layer: px-3 pt-1 sm:pt-2 matches + the sticky container's padding so the + overlay aligns with the flow element. + will-change promotes to GPU layer. */}
= ({ hasStreamOutput && parsedSections.length > 0; return ( -
+
{isEmpty && !hasStreamOutput ? (

Start a conversation with your agent.

diff --git a/site/src/pages/AgentsPage/AgentDetailView.tsx b/site/src/pages/AgentsPage/AgentDetailView.tsx index 3b0fdff870..d815803ead 100644 --- a/site/src/pages/AgentsPage/AgentDetailView.tsx +++ b/site/src/pages/AgentsPage/AgentDetailView.tsx @@ -245,7 +245,7 @@ export const AgentDetailView: FC = ({ )}