From d7037280da5c983aa1d2c722681e74f80422e854 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 28 Jan 2026 12:57:17 +1100
Subject: [PATCH] feat: improve `max-height` on `<PopoverContent />` (#21600)

Closes #21593

Various `<PopoverContent>`'s among the application were found that when
the screen-size was too small we weren't able to actually see the full
content unless we resized the window. This pull-request ensures that the
content is never going to extend past that of the
`--radix-popper-available-height` without having an appropriate
scrollbar.

| Before | After |
| --- | --- |
| <img width="948" height="960" alt="CleanShot 2026-01-21 at 20 56
48@2x"
src="https://github.com/user-attachments/assets/5d15fbf9-1c62-427b-bbed-81239922a6bc"
/> | <img width="896" height="906" alt="CleanShot 2026-01-21 at 21 19
03@2x"
src="https://github.com/user-attachments/assets/cfa5baa5-2ec1-438c-9454-bf3073dc6534"
/> |
---
 site/src/components/Popover/Popover.tsx                |  1 +
 site/src/modules/resources/PortForwardButton.tsx       |  2 +-
 site/src/modules/tasks/TasksSidebar/UserCombobox.tsx   | 10 +++++++---
 .../UserTable/EditRolesButton.tsx                      |  4 ++--
 .../TemplatePage/TemplateInsightsPage/DateRange.tsx    |  2 +-
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
index 25a4daf01c..91ee43115d 100644
--- a/site/src/components/Popover/Popover.tsx
+++ b/site/src/components/Popover/Popover.tsx
@@ -33,6 +33,7 @@ export const PopoverContent = forwardRef<
 			className={cn(
 				`z-50 w-72 rounded-md border border-solid bg-surface-primary
 				text-content-primary shadow-md outline-none
+				max-h-[var(--radix-popper-available-height)] overflow-y-auto
 				data-[state=open]:animate-in data-[state=closed]:animate-out
 				data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
 				data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx
index b92218993d..4a5e17bcce 100644
--- a/site/src/modules/resources/PortForwardButton.tsx
+++ b/site/src/modules/resources/PortForwardButton.tsx
@@ -525,7 +525,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 											</Select>
 										</FormControl>
 										<Button
-											size="sm"
+											size="icon"
 											variant="subtle"
 											onClick={async () => {
 												await deleteSharedPortMutation.mutateAsync({
diff --git a/site/src/modules/tasks/TasksSidebar/UserCombobox.tsx b/site/src/modules/tasks/TasksSidebar/UserCombobox.tsx
index 761329175b..fa568421c8 100644
--- a/site/src/modules/tasks/TasksSidebar/UserCombobox.tsx
+++ b/site/src/modules/tasks/TasksSidebar/UserCombobox.tsx
@@ -77,15 +77,19 @@ export const UserCombobox: FC<UserComboboxProps> = ({
 					<ChevronsUpDownIcon className="h-4 w-4 shrink-0 opacity-50" />
 				</Button>
 			</PopoverTrigger>
-			<PopoverContent className="w-[280px] p-0 " side="bottom" align="start">
-				<Command>
+			<PopoverContent
+				className="flex flex-col w-[280px] p-0"
+				side="bottom"
+				align="start"
+			>
+				<Command className="flex-1 min-h-0">
 					<CommandInput
 						placeholder="Search user..."
 						value={search}
 						onValueChange={setSearch}
 						aria-label="Search user"
 					/>
-					<CommandList>
+					<CommandList className="flex-1 min-h-0 max-h-none">
 						<CommandEmpty>No users found.</CommandEmpty>
 						<CommandGroup>
 							{options?.map((option) => (
diff --git a/site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx b/site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx
index 87be0b6c6a..332aa050e4 100644
--- a/site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx
+++ b/site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx
@@ -159,7 +159,7 @@ const EnabledEditRolesButton: FC<EditRolesButtonProps> = ({
 					disabled={isLoading}
 					title="Available roles"
 				>
-					<div className="flex flex-col gap-4 p-6 w-96">
+					<div className="flex flex-col gap-4 p-6 w-full">
 						{filteredRoles.map((role) => (
 							<Option
 								key={role.name}
@@ -186,7 +186,7 @@ const EnabledEditRolesButton: FC<EditRolesButtonProps> = ({
 						)}
 					</div>
 				</fieldset>
-				<div className="p-6 border-t-1 border-solid border-border text-sm">
+				<div className="p-6 border-0 border-t border-solid border-border text-sm">
 					<div className="flex gap-4">
 						<UserIcon />
 						<div className="flex flex-col">
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx
index 6c53a7e9b4..347f29bf85 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx
@@ -52,7 +52,7 @@ export const DateRange: FC<DateRangeProps> = ({ value, onChange }) => {
 					<span>{dayjs(value.endDate).format("MMM D, YYYY")}</span>
 				</Button>
 			</PopoverTrigger>
-			<PopoverContent>
+			<PopoverContent className="w-auto p-0 overflow-x-hidden">
 				<DateRangePicker
 					css={styles.wrapper}
 					onChange={(item) => {