From 6b64997977d2d02f6fc40b58b277833a8d1284e3 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 17 Jul 2026 11:19:45 +0000
Subject: [PATCH] fix(site): wrap workspace topbar controls on narrow viewports

---
 site/src/components/FullPageLayout/Topbar.tsx        | 12 ++++++++++--
 .../WorkspaceActions/WorkspaceActions.tsx            |  5 ++++-
 site/src/pages/WorkspacePage/WorkspaceTopbar.tsx     |  6 +++---
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx
index 39fccef4ae7..6f1ad8f7966 100644
--- a/site/src/components/FullPageLayout/Topbar.tsx
+++ b/site/src/components/FullPageLayout/Topbar.tsx
@@ -44,8 +44,16 @@ export const TopbarButton: React.FC<ButtonProps> = ({ ...props }) => {
 	return <Button variant="outline" size="sm" {...props} />;
 };
 
-export const TopbarData: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
-	return <div {...props} className="flex gap-2 items-center justify-center" />;
+export const TopbarData: FC<HTMLAttributes<HTMLDivElement>> = ({
+	className,
+	...props
+}) => {
+	return (
+		<div
+			{...props}
+			className={cn("flex gap-2 items-center justify-center", className)}
+		/>
+	);
 };
 
 export const TopbarDivider: FC<
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
index f4912801a4d..72ab7e6443b 100644
--- a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -163,7 +163,10 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
 	};
 
 	return (
-		<div className="flex items-center gap-2" data-testid="workspace-actions">
+		<div
+			className="flex flex-wrap items-center justify-end gap-2"
+			data-testid="workspace-actions"
+		>
 			{/* Restarting must be handled separately, because it otherwise would appear as stopping */}
 			{isUpdating
 				? buttonMapping.updating
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
index 030237dde4c..09c3b398305 100644
--- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -117,7 +117,7 @@ export const WorkspaceTopbar: FC<WorkspaceTopbarProps> = ({
 	);
 
 	return (
-		<Topbar className="[grid-area:topbar]">
+		<Topbar className="[grid-area:topbar] flex-wrap gap-y-2">
 			<Tooltip>
 				<TooltipTrigger asChild>
 					<TopbarIconButton asChild>
@@ -130,7 +130,7 @@ export const WorkspaceTopbar: FC<WorkspaceTopbarProps> = ({
 			</Tooltip>
 
 			<div className="flex items-center gap-y-6 gap-x-2 flex-wrap px-3 py-2 mr-auto">
-				<TopbarData>
+				<TopbarData className="flex-wrap">
 					<OwnerBreadcrumb
 						ownerName={workspace.owner_name}
 						ownerAvatarUrl={workspace.owner_avatar_url}
@@ -217,7 +217,7 @@ export const WorkspaceTopbar: FC<WorkspaceTopbarProps> = ({
 			</div>
 
 			{!isImmutable && (
-				<div className="flex items-center gap-4">
+				<div className="flex flex-wrap grow items-center justify-end gap-x-4 gap-y-2 min-h-12">
 					<WorkspaceScheduleControls
 						workspace={workspace}
 						template={template}