opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(site): improve mobile layout for agent chat (#23139)

Browse Source
This commit is contained in:
Kyle Carberry
2026-03-16 18:36:37 -04:00
committed by GitHub
parent 7b0aa31b55
commit b69631cb35
3 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/AgentsPage/AgentChatInput.tsx
+2 -3
View File
@@ -563,7 +563,7 @@ export const AgentChatInput = memo<AgentChatInputProps>(
const sendButtonLabel = editingQueuedMessageID !== null ? "Save" : "Send";
const content = (
<div className="mx-auto w-full max-w-3xl pb-4">
<div className="mx-auto w-full max-w-3xl pb-0 sm:pb-4">
{queuedMessages.length > 0 && (
<QueuedMessagesList
messages={queuedMessages}
@@ -642,13 +642,12 @@ export const AgentChatInput = memo<AgentChatInputProps>(
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
/>
<div className="flex items-center justify-between gap-2 px-2.5 pb-1.5">
site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx
+19 -13
View File
@@ -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<{
<div
ref={containerRef}
className={cn(
"relative px-3 -mx-3 pt-2 pb-2",
"relative px-3 -mx-3 pt-0.5 pb-0.5 sm:pt-2 sm:pb-2",
!isTooTall && "sticky top-0 z-10",
!isReady && "invisible",
isStuck && !isTooTall && "pointer-events-none",
@@ -805,26 +808,29 @@ 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. */}
<div
className="absolute inset-0 backdrop-blur-[1px] bg-surface-primary/15"
style={{
maxHeight: "calc(var(--clip-h, 100%) + 48px)",
willChange: "max-height, mask-image",
maskImage:
"linear-gradient(to bottom, black calc(var(--clip-h, 100%) + 24px), transparent calc(var(--clip-h, 100%) + 48px))",
"linear-gradient(to bottom, black calc(var(--clip-h, 100%) - 24px), transparent calc(var(--clip-h, 100%) + 48px))",
WebkitMaskImage:
"linear-gradient(to bottom, black calc(var(--clip-h, 100%) + 24px), transparent calc(var(--clip-h, 100%) + 48px))",
"linear-gradient(to bottom, black calc(var(--clip-h, 100%) - 24px), transparent calc(var(--clip-h, 100%) + 48px))",
}}
/>
{/* 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. */}
<div
className="relative px-3 pt-2 pointer-events-auto"
className="relative px-3 pt-0.5 sm:pt-2 pointer-events-auto"
style={{ willChange: "max-height" }}
>
<ChatMessageItem
@@ -888,7 +894,7 @@ export const ConversationTimeline: FC<ConversationTimelineProps> = ({
hasStreamOutput && parsedSections.length > 0;
return (
<div className="mx-auto w-full max-w-3xl py-6">
<div className="mx-auto w-full max-w-3xl py-3 sm:py-6">
{isEmpty && !hasStreamOutput ? (
<div className="py-12 text-center text-content-secondary">
<p className="text-sm">Start a conversation with your agent.</p>
site/src/pages/AgentsPage/AgentDetailView.tsx
+1 -1
View File
@@ -245,7 +245,7 @@ export const AgentDetailView: FC<AgentDetailViewProps> = ({
)}
<div
aria-hidden
className="pointer-events-none absolute inset-x-0 top-full z-10 h-6 bg-surface-primary"
className="pointer-events-none absolute inset-x-0 top-full z-10 h-3 sm:h-6 bg-surface-primary"
style={{
maskImage:
"linear-gradient(to bottom, black 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 70%, transparent 100%)",