fix: implement proper overflow behavior for workspace history (#19340)

brettkolodny · web-flow · commit 5b5fbbed33ca · 2025-08-14T09:26:20.000-04:00
Before: https://github.com/user-attachments/assets/2f1ff75c-4916-4d0a-a657-004d46691ea0 After: https://github.com/user-attachments/assets/a8e575b5-84f9-4eea-b318-93d2a3d60aa5 Also converts a lot of emotion components to tailwind
diff --git a/site/src/components/FullPageLayout/Sidebar.tsx b/site/src/components/FullPageLayout/Sidebar.tsx
@@ -1,30 +1,28 @@
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import type { ComponentProps, FC, HTMLAttributes } from "react";
 import { Link, type LinkProps } from "react-router";
+import { cn } from "utils/cn";
 import { TopbarIconButton } from "./Topbar";
 
 export const Sidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
-	const theme = useTheme();
 	return (
 		<div
-			css={{
-				width: 260,
-				borderRight: `1px solid ${theme.palette.divider}`,
-				height: "100%",
-				overflow: "auto",
-				flexShrink: 0,
-				padding: "8px 0",
-				display: "flex",
-				flexDirection: "column",
-				gap: 1,
-			}}
+			// TODO: Remove extra border classes once MUI is removed
+			className="flex flex-col gap-px w-64 border-solid border-0 border-r border-r-border h-full py-2 shrink-0 overflow-y-auto"
 			{...props}
 		/>
 	);
 };
 
-export const SidebarLink: FC<LinkProps> = (props) => {
-	return <Link css={styles.sidebarItem} {...props} />;
+export const SidebarLink: FC<LinkProps> = ({ className, ...props }) => {
+	return (
+		<Link
+			className={cn(
+				"text-[13px] text-content-primary py-2 px-4 text-left bg-transparent hover:divide-surface-tertiary cursor-pointer border-0 no-underline",
+				className,
+			)}
+			{...props}
+		/>
+	);
 };
 
 interface SidebarItemProps extends HTMLAttributes<HTMLButtonElement> {
@@ -33,21 +31,16 @@ interface SidebarItemProps extends HTMLAttributes<HTMLButtonElement> {
 
 export const SidebarItem: FC<SidebarItemProps> = ({
 	isActive,
+	className,
 	...buttonProps
 }) => {
-	const theme = useTheme();
-
 	return (
 		<button
-			css={[
-				styles.sidebarItem,
-				{ opacity: "0.75", "&:hover": { opacity: 1 } },
-				isActive && {
-					background: theme.palette.action.selected,
-					opacity: 1,
-					pointerEvents: "none",
-				},
-			]}
+			className={cn(
+				"text-[13px] text-content-primary py-2 px-4 text-left bg-transparent hover:divide-surface-tertiary opacity-75 hover:opacity-100 cursor-pointer border-0",
+				isActive && "opacity-100 bg-surface-tertiary",
+				className,
+			)}
 			{...buttonProps}
 		/>
 	);
@@ -56,15 +49,7 @@ export const SidebarItem: FC<SidebarItemProps> = ({
 export const SidebarCaption: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
 	return (
 		<span
-			css={{
-				fontSize: 10,
-				lineHeight: 1.2,
-				padding: "12px 16px",
-				display: "block",
-				textTransform: "uppercase",
-				fontWeight: 500,
-				letterSpacing: "0.1em",
-			}}
+			className="text-[10px] leading-tight py-3 px-4 uppercase font-medium text-content-primary tracking-widest"
 			{...props}
 		/>
 	);
@@ -76,49 +61,17 @@ interface SidebarIconButton extends ComponentProps<typeof TopbarIconButton> {
 
 export const SidebarIconButton: FC<SidebarIconButton> = ({
 	isActive,
+	className,
 	...buttonProps
 }) => {
 	return (
 		<TopbarIconButton
-			css={[
-				{ opacity: 0.75, "&:hover": { opacity: 1 } },
-				isActive && styles.activeSidebarIconButton,
-			]}
+			className={cn(
+				"opacity-75 hover:opacity-100 border-0 border-x-2 border-x-transparent border-solid",
+				isActive && "opacity-100 relative border-l-sky-400",
+				className,
+			)}
 			{...buttonProps}
 		/>
 	);
 };
-
-const styles = {
-	sidebarItem: (theme) => ({
-		fontSize: 13,
-		lineHeight: 1.2,
-		color: theme.palette.text.primary,
-		textDecoration: "none",
-		padding: "8px 16px",
-		display: "block",
-		textAlign: "left",
-		background: "none",
-		border: 0,
-		cursor: "pointer",
-
-		"&:hover": {
-			backgroundColor: theme.palette.action.hover,
-		},
-	}),
-
-	activeSidebarIconButton: (theme) => ({
-		opacity: 1,
-		position: "relative",
-		"&::before": {
-			content: '""',
-			position: "absolute",
-			left: 0,
-			top: 0,
-			bottom: 0,
-			width: 2,
-			backgroundColor: theme.palette.primary.main,
-			height: "100%",
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/modules/dashboard/DashboardLayout.tsx b/site/src/modules/dashboard/DashboardLayout.tsx
@@ -23,10 +23,10 @@ export const DashboardLayout: FC = () => {
 			{canViewDeployment && <LicenseBanner />}
 			<AnnouncementBanners />
 
-			<div className="flex flex-col min-h-full">
+			<div className="flex flex-col h-screen">
 				<Navbar />
 
-				<div className="flex flex-col flex-1 pb-12">
+				<div className="flex flex-col flex-1 min-h-0">
 					<Suspense fallback={<Loader />}>
 						<Outlet />
 					</Suspense>
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -51,7 +51,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 	const webPush = useWebpushNotifications();
 
 	return (
-		<div className="border-0 border-b border-solid h-[72px] flex items-center leading-none px-6">
+		<div className="border-0 border-b border-solid h-[72px] min-h-[72px] flex items-center leading-none px-6">
 			<NavLink to="/workspaces">
 				{logo_url ? (
 					<ExternalImage className="h-7" src={logo_url} alt="Custom Logo" />
diff --git a/site/src/pages/WorkspacePage/HistorySidebar.tsx b/site/src/pages/WorkspacePage/HistorySidebar.tsx
@@ -8,6 +8,7 @@ import {
 	SidebarItem,
 	SidebarLink,
 } from "components/FullPageLayout/Sidebar";
+import { ScrollArea } from "components/ScrollArea/ScrollArea";
 import { Spinner } from "components/Spinner/Spinner";
 import {
 	WorkspaceBuildData,
@@ -30,36 +31,40 @@ export const HistorySidebar: FC<HistorySidebarProps> = ({ workspace }) => {
 	return (
 		<Sidebar>
 			<SidebarCaption>History</SidebarCaption>
-			{builds
-				? builds.map((build) => (
-						<SidebarLink
-							target="_blank"
-							key={build.id}
-							to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
-						>
-							<WorkspaceBuildData build={build} />
-						</SidebarLink>
-					))
-				: Array.from({ length: 15 }, (_, i) => (
-						<SidebarItem key={i}>
-							<WorkspaceBuildDataSkeleton />
-						</SidebarItem>
-					))}
-			{buildsQuery.hasNextPage && (
-				<div css={{ padding: 16 }}>
-					<Button
-						onClick={() => buildsQuery.fetchNextPage()}
-						disabled={buildsQuery.isFetchingNextPage}
-						variant="outline"
-						className="w-full"
-					>
-						<Spinner loading={buildsQuery.isFetchingNextPage}>
-							<ArrowDownwardOutlined />
-						</Spinner>
-						Show more builds
-					</Button>
+			<ScrollArea>
+				<div className="flex flex-col gap-px">
+					{builds
+						? builds.map((build) => (
+								<SidebarLink
+									target="_blank"
+									key={build.id}
+									to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
+								>
+									<WorkspaceBuildData build={build} />
+								</SidebarLink>
+							))
+						: Array.from({ length: 15 }, (_, i) => (
+								<SidebarItem key={i}>
+									<WorkspaceBuildDataSkeleton />
+								</SidebarItem>
+							))}
+					{buildsQuery.hasNextPage && (
+						<div css={{ padding: 16 }}>
+							<Button
+								onClick={() => buildsQuery.fetchNextPage()}
+								disabled={buildsQuery.isFetchingNextPage}
+								variant="outline"
+								className="w-full"
+							>
+								<Spinner loading={buildsQuery.isFetchingNextPage}>
+									<ArrowDownwardOutlined />
+								</Spinner>
+								Show more builds
+							</Button>
+						</div>
+					)}
 				</div>
-			)}
+			</ScrollArea>
 		</Sidebar>
 	);
 };
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
