fix(site): improve agents page mobile view by tracyjohnsonux · Pull Request #24508 · coder/coder

tracyjohnsonux · 2026-04-18T05:32:42Z

Summary

Mobile view cleanup for the agents page — all changes are behind the md: breakpoint so desktop is unchanged.

Dropdowns: Full-width on mobile with dynamic positioning via a --mobile-dropdown-bottom CSS custom property set by a ResizeObserver on the chat input box. Three position variants: -bottom (above chat input), -top (below header), -top-below-header (below sidebar header). Viewport branching uses a new isBelowMdViewport() helper (< 768px) so 640–767 px landscape phones pick the mobile branch instead of the desktop flyout.

Layout: On the main agents page, mobile ordering is header → chat list → chat input using CSS order and contents on the content wrapper. The chat input aligns to the bottom of available space. The sidebar list uses a top/bottom fade mask on mobile to hint at scrollable content.

Header: Settings, Analytics, sound, and notification icons consolidated into a single meatball menu dropdown on mobile. Sound/notification toggles use e.preventDefault() to keep the menu open for state feedback. Chime and notification state is lifted into AgentCreatePage and passed down, so the mobile meatball menu and the desktop ChimeButton/WebPushButton stay in sync.

Workspace pill: Icon-only on mobile (size-7 round button with StatusIcon), full pill on desktop. Tooltip hidden on mobile to prevent ghost tooltip after dropdown close.

Plus menu: Workspace picker replaces the flyout with an inline sub-panel on mobile (back button + search list). Desktop flyout unchanged. modal={false} prevents double-tap when switching between dropdowns.

Model selector: Truncated via shrink + min-w-0 on mobile (flex-based, no fixed max-width), inline provider/context subtext per item, tooltip hidden on mobile. Added open / onOpenChange / onTriggerTouchStart props for external control.

Consistency: All back/close buttons normalized to ArrowLeftIcon. Right panel, sidebar settings, header mobileBack, and workspace sub-panel all match the chat top bar pattern.

Misc polish: Chat tree nodes use select-none + -webkit-touch-callout:none on coarse pointers to suppress the long-press selection/callout on mobile.

Files changed (18)

site/src/index.css — mobile dropdown CSS with 3 position variants
site/src/utils/mobile.ts — new isBelowMdViewport() helper (<768px)
site/src/pages/AgentsPage/AgentChatPageView.tsx — bottom padding pb-3
site/src/pages/AgentsPage/AgentCreatePage.tsx — lift chime + webpush state; pass handlers to header and buttons
site/src/pages/AgentsPage/AgentsPageView.tsx — contents wrapper + sidebar border-b
site/src/pages/AgentsPage/components/AgentChatInput.tsx — ResizeObserver composer ref, plusMenuView state, inline workspace picker, modal={false}, mobile branching via isBelowMdViewport, bg
site/src/pages/AgentsPage/components/AgentCreateForm.tsx — order-last + items-end on mobile
site/src/pages/AgentsPage/components/AgentPageHeader.tsx — meatball menu (controlled chime/webpush props), ArrowLeftIcon, order-first, padding, desktop/mobile branching via matchMedia
site/src/pages/AgentsPage/components/AgentPageHeader.stories.tsx — new Storybook coverage + play assertions that toggle state stays in sync across breakpoints
site/src/pages/AgentsPage/components/ChimeButton.tsx — optional controlled enabled / onToggle props
site/src/pages/AgentsPage/components/WebPushButton.tsx — optional controlled webPush / onToggle props
site/src/pages/AgentsPage/components/ChatElements/CompactOrgSelector.tsx — full-width dropdown class
site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx — truncation, inline subtext, tooltip hidden on mobile, new props (open, onOpenChange, onTriggerTouchStart)
site/src/pages/AgentsPage/components/ChatTopBar.tsx — full-width dropdown class
site/src/pages/AgentsPage/components/ContextUsageIndicator.tsx — full-width dropdown class (mobile branch)
site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx — ArrowLeftIcon, filter dropdown class, top/bottom fade mask on scroll area, select-none on tree nodes
site/src/pages/AgentsPage/components/Sidebar/SidebarTabView.tsx — ArrowLeftIcon, padding, back button placement
site/src/pages/AgentsPage/components/WorkspacePill.tsx — compact icon trigger, tooltip hidden on mobile, full-width dropdown class

🤖 Generated by Coder Agents

- Full-width dropdowns on mobile with dynamic positioning - Compact workspace pill (icon-only on mobile) - Model selector truncation with inline subtext - Meatball menu consolidating header actions - Inline workspace picker replacing flyout - Consistent ArrowLeftIcon back buttons - Mobile layout reordering (header → chat list → input) - Solid chat input background on mobile - Right panel back button and padding updates

…used imports

jaaydenh · 2026-04-20T14:34:34Z

@codex review

…-view

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8eceec6e2e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

jaaydenh · 2026-04-20T14:58:44Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 382b0ac358

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

jaaydenh

Thanks for addressing the dropdown ResizeObserver cleanup and the 640–767px workspace-picker breakpoint mismatch on the current head. Fresh deep review on 382b0ac358 didn’t find any new issues beyond the existing current-head P2 on site/src/pages/AgentsPage/components/AgentPageHeader.tsx, where the duplicated mobile and hidden desktop header actions can drift out of sync across the md breakpoint.

Generated by Coder Agents.

…-view Made-with: Cursor # Conflicts: # site/src/index.css # site/src/pages/AgentsPage/components/AgentChatInput.tsx

jaaydenh · 2026-04-21T04:43:34Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a2f0de4bd2

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

jaaydenh · 2026-04-21T07:47:59Z

@codex review

chatgpt-codex-connector · 2026-04-21T07:57:06Z

Codex Review: Didn't find any major issues. Keep them coming!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

jaaydenh · 2026-04-21T08:18:43Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d5aa984db8

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

jaaydenh · 2026-04-21T08:37:54Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: fdabbc8e43

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

jaaydenh · 2026-04-21T08:50:25Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c7a86713d2

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

DanielleMaywood

Sorry for the large review.

Main point: This module-full-width-dropdown and mobile-full-width-dropdown-bottom approach is 100% being done at the wrong level. If we're having to apply these to every dropdown then the correct fix is making sure the actual components are mobile friendly.

DanielleMaywood · 2026-04-21T11:00:25Z

+@layer components {
+	/* Map each stripe variant to a color token so the
+	   pseudo-element rules can stay DRY. */
+	.navbar-stripe-devel {
+		--stripe-color: var(--content-warning);
+	}
+
+	.navbar-stripe-rc {
+		--stripe-color: var(--border-sky);
+	}
+
+	/* Thin stripe bars at the top and bottom edges of the
+	   navbar. Using pseudo-elements keeps the stripes out of
+	   the content area so nav links stay readable. */
+	.navbar-stripe-devel::before,
+	.navbar-stripe-devel::after,
+	.navbar-stripe-rc::before,
+	.navbar-stripe-rc::after {
+		content: "";
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 4px;
+		background: repeating-linear-gradient(
+			-45deg,
+			transparent,
+			transparent 4px,
+			hsl(var(--stripe-color) / 0.5) 4px,
+			hsl(var(--stripe-color) / 0.5) 8px
+		);
+		pointer-events: none;
+	}
+
+	.navbar-stripe-devel::before,
+	.navbar-stripe-rc::before {
+		top: 0;
+	}
+
+	.navbar-stripe-devel::after,
+	.navbar-stripe-rc::after {
+		bottom: 0;
+	}
+
+	@media (max-width: 767px) {
+		/*
+			 * Full-width mobile dropdowns. We set a --mobile-dropdown-bottom
+			 * custom property on the chat input container so the dropdown
+			 * position tracks the actual input box, not a hardcoded offset.
+			 */
+		[data-radix-popper-content-wrapper]:has(> .mobile-full-width-dropdown) {
+			position: fixed !important;
+			left: 1rem !important;
+			width: calc(100vw - 2rem) !important;
+			min-width: 0 !important;
+			transform: none !important;
+			bottom: var(--mobile-dropdown-bottom, 5rem) !important;
+			top: auto !important;
+		}
+		[data-radix-popper-content-wrapper]:has(> .mobile-full-width-dropdown-top) {
+			bottom: auto !important;
+			top: var(--mobile-dropdown-top, 3.5rem) !important;
+		}
+		[data-radix-popper-content-wrapper]:has(
+				> .mobile-full-width-dropdown-top-below-header
+			) {
+			bottom: auto !important;
+			top: 5rem !important;
+		}
+		.mobile-full-width-dropdown {
+			width: 100% !important;
+			min-width: 0 !important;
+			max-width: none !important;
+		}
+	}
+}


Why are we modifying the index.css btw? I'm not going to reject because of this but I just want to be really careful about us touching this as it can cascade across the entire frontend

DanielleMaywood · 2026-04-21T11:02:01Z

 				side="top"
 				align="start"
-				className="w-48 p-1 [&_[role=menuitem]]:text-xs [&_[role=menuitem]]:py-1 [&_svg]:!size-3.5 [&_img]:!size-3.5"
+				className="mobile-full-width-dropdown mobile-full-width-dropdown-bottom w-48 p-1 [&_[role=menuitem]]:text-xs [&_[role=menuitem]]:py-1 [&_svg]:!size-3.5 [&_img]:!size-3.5"


I can see we're introducing classes defined in index.css here? I'm really not too sure this is being done at the correct abstraction level

DanielleMaywood · 2026-04-21T11:03:09Z

-				<PopoverContent side="top" className="w-auto max-w-72 px-3 py-2">
+				<PopoverContent
+					side="top"
+					className="mobile-full-width-dropdown mobile-full-width-dropdown-bottom w-auto max-w-72 px-3 py-2"


same classes again

DanielleMaywood · 2026-04-21T11:07:54Z

 						<DropdownMenuContent
 							align="end"
-							className="[&_[role=menuitem]]:text-[13px]"
+							className="mobile-full-width-dropdown mobile-full-width-dropdown-top [&_[role=menuitem]]:text-[13px]"


same classes again

github-actions Bot assigned tracyjohnsonux Apr 18, 2026

tracyjohnsonux added 2 commits April 18, 2026 05:36

fix(site): use flex shrink instead of fixed max-width for model selector

cbcba15

fix(site): remove duplicate desktop settings/analytics buttons and un…

8eceec6

…used imports

Merge remote-tracking branch 'origin/main' into cleanup/agents-mobile…

44c96e2

…-view

chatgpt-codex-connector Bot reviewed Apr 20, 2026

View reviewed changes

Comment thread site/src/pages/AgentsPage/components/AgentChatInput.tsx Outdated

Comment thread site/src/pages/AgentsPage/components/AgentChatInput.tsx Outdated

jaaydenh added 2 commits April 20, 2026 14:54

fix: improvements

ee80849

fix: format

382b0ac

chatgpt-codex-connector Bot reviewed Apr 20, 2026

View reviewed changes

Comment thread site/src/pages/AgentsPage/components/AgentPageHeader.tsx Outdated

Comment thread site/src/pages/AgentsPage/components/AgentChatInput.tsx Outdated

jaaydenh reviewed Apr 20, 2026

View reviewed changes

jaaydenh added 2 commits April 21, 2026 04:09

Merge remote-tracking branch 'origin/main' into cleanup/agents-mobile…

c2b18a2

…-view Made-with: Cursor # Conflicts: # site/src/index.css # site/src/pages/AgentsPage/components/AgentChatInput.tsx

fix: codex issues

a2f0de4

fix: fix lint

496e004

chatgpt-codex-connector Bot reviewed Apr 21, 2026

View reviewed changes

Comment thread site/src/pages/AgentsPage/components/AgentChatInput.tsx Outdated

Comment thread site/src/pages/AgentsPage/components/AgentPageHeader.tsx Outdated

fix: clean up notification toggles

bc554e2

fix: fix story

05326c8

jaaydenh added 3 commits April 21, 2026 08:02

fix: fix story

7fd0a4c

fix: fix storybook test

447fc8e

chore: update mobile layout

d5aa984

chore: disable text selection on mobile

81a17fe

chatgpt-codex-connector Bot reviewed Apr 21, 2026

View reviewed changes

Comment thread site/src/pages/AgentsPage/components/AgentChatInput.tsx Outdated

Comment thread site/src/pages/AgentsPage/components/AgentChatInput.tsx

fix: fix for codex review

fdabbc8

jaaydenh requested a review from DanielleMaywood April 21, 2026 08:38

jaaydenh self-assigned this Apr 21, 2026

chatgpt-codex-connector Bot reviewed Apr 21, 2026

View reviewed changes

Comment thread site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx

Comment thread site/src/pages/AgentsPage/components/AgentPageHeader.tsx Outdated

fix: fix codex review comments

c7a8671

chatgpt-codex-connector Bot reviewed Apr 21, 2026

View reviewed changes

Comment thread site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx

coder deleted a comment from chatgpt-codex-connector Bot Apr 21, 2026

DanielleMaywood requested changes Apr 21, 2026

View reviewed changes

jaaydenh marked this pull request as ready for review April 21, 2026 12:18

jaaydenh added 2 commits April 21, 2026 13:51

chore: cleanup

c88996b

fix: remove emdash

b8690b5

Conversation

tracyjohnsonux commented Apr 18, 2026 • edited by jaaydenh Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

jaaydenh commented Apr 20, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

jaaydenh commented Apr 20, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

jaaydenh left a comment

Choose a reason for hiding this comment

Uh oh!

jaaydenh commented Apr 21, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

jaaydenh commented Apr 21, 2026

Uh oh!

chatgpt-codex-connector Bot commented Apr 21, 2026

Uh oh!

jaaydenh commented Apr 21, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

jaaydenh commented Apr 21, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

jaaydenh commented Apr 21, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

DanielleMaywood left a comment

Choose a reason for hiding this comment

Uh oh!

DanielleMaywood Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

DanielleMaywood Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

DanielleMaywood Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

DanielleMaywood Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

tracyjohnsonux commented Apr 18, 2026 •

edited by jaaydenh

Loading