From 332e32d42b9037f614fc5349bff5d7edcbf5f469 Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Thu, 2 Jul 2026 14:37:13 +0100
Subject: [PATCH] fix(site/src): keep short mobile dropdowns above the software
 keyboard (#26965)

---
 site/src/index.css                              |  3 ++-
 .../AgentsPage/components/AgentChatInput.tsx    | 17 +++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/site/src/index.css b/site/src/index.css
index 49bfa2e059..fd2607b30c 100644
--- a/site/src/index.css
+++ b/site/src/index.css
@@ -36,7 +36,8 @@
 			  dropdowns.
 			- `--mobile-dropdown-above-composer-bottom`: distance from
 			  the layout viewport bottom to a point just above the
-			  composer's top edge.
+			  composer's top edge, clamped to stay above the software
+			  keyboard when the keyboard covers the composer.
 			- `--mobile-dropdown-above-composer-max-height`: maximum
 			  height the `-above-composer` variant can grow to without
 			  extending past the visible viewport top.
diff --git a/site/src/pages/AgentsPage/components/AgentChatInput.tsx b/site/src/pages/AgentsPage/components/AgentChatInput.tsx
index f39786ab7b..7df03bbc01 100644
--- a/site/src/pages/AgentsPage/components/AgentChatInput.tsx
+++ b/site/src/pages/AgentsPage/components/AgentChatInput.tsx
@@ -645,15 +645,24 @@ export const AgentChatInput: FC<AgentChatInputProps> = ({
 			const fixedViewportBottom = fixedProbe.getBoundingClientRect().bottom;
 			const visibleViewportTop = viewport?.offsetTop ?? 0;
 			const bottom = Math.max(0, fixedViewportBottom - rect.bottom);
-			// Distance from the fixed-position viewport bottom to a point
-			// just above the composer's top edge.
+			// Keep the dropdown's bottom edge above the software keyboard,
+			// which covers the bottom of the layout viewport without moving
+			// fixed-positioned elements.
+			const keyboardInset = viewport
+				? Math.max(
+						0,
+						fixedViewportBottom - (viewport.offsetTop + viewport.height),
+					)
+				: 0;
 			const aboveComposerBottom = Math.max(
 				0,
 				fixedViewportBottom - rect.top + composerGap,
+				keyboardInset + composerGap,
 			);
+			const dropdownBottomEdgeTop = fixedViewportBottom - aboveComposerBottom;
 			const maxHeightCandidates = [
-				rect.top - visibleViewportTop - composerGap - viewportPadding,
-				rect.top - composerGap - viewportPadding,
+				dropdownBottomEdgeTop - visibleViewportTop - viewportPadding,
+				dropdownBottomEdgeTop - viewportPadding,
 			].filter((height) => height > 0);
 			const aboveComposerMaxHeight = Math.max(
 				minimumMenuHeight,