fix: resolve sizing of <WorkspaceTopbar /> (#21817)

This pull-request resolves a very slight height issue we had with
`<WorkspaceTopbar />` wherein the Back/`‹` icon wouldn't actually be the
correct height. This was being pushed slightly larger due to the content
of the breadcrumbs exceeding `48px` height we `min-height` on.

| Old | New |
| --- | --- |
| <img width="324" height="251" alt="OLD_BACK_BUTTON"
src="https://github.com/user-attachments/assets/971057e5-3534-46e2-8f5b-acb96d510658"
/> | <img width="324" height="251" alt="NEW_BACK_BUTTON"
src="https://github.com/user-attachments/assets/780912bc-8f43-4331-94b5-d1137c71a2bd"
/> |

site/src/components/FullPageLayout/Topbar.tsx

@@ -1,4 +1,3 @@
-import { css } from "@emotion/css";
 import { useTheme } from "@emotion/react";
 import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
 import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
@@ -13,41 +12,32 @@ import {
 } from "react";
 import { cn } from "utils/cn";
 
-export const Topbar: FC<HTMLAttributes<HTMLElement>> = (props) => {
-	const theme = useTheme();
-
+export const Topbar: FC<HTMLAttributes<HTMLElement>> = ({
+	className,
+	...props
+}) => {
 	return (
 		<header
 			{...props}
-			css={{
-				minHeight: 48,
-				borderBottom: `1px solid ${theme.palette.divider}`,
-				display: "flex",
-				alignItems: "center",
-				fontSize: 13,
-				lineHeight: "1.2",
-			}}
+			className={cn(
+				"min-h-12 border-0 border-b border-border border-solid flex items-center text-[13px] leading-tight",
+				className,
+			)}
 		/>
 	);
 };
 
 export const TopbarIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-	(props, ref) => {
+	({ className, ...props }, ref) => {
 		return (
 			<IconButton
 				ref={ref}
 				{...props}
 				size="small"
-				css={{
-					padding: 0,
-					borderRadius: 0,
-					height: 48,
-					width: 48,
-
-					"& svg": {
-						fontSize: 20,
-					},
-				}}
+				className={cn(
+					"p-0 rounded-none size-12 [&_svg]:size-icon-sm",
+					className,
+				)}
 			/>
 		);
 	},
@@ -60,17 +50,7 @@ export const TopbarButton = forwardRef<HTMLButtonElement, ButtonProps>(
 );
 
 export const TopbarData: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
-	return (
-		<div
-			{...props}
-			css={{
-				display: "flex",
-				gap: 8,
-				alignItems: "center",
-				justifyContent: "center",
-			}}
-		/>
-	);
+	return <div {...props} className="flex gap-2 items-center justify-center" />;
 };
 
 export const TopbarDivider: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
@@ -91,7 +71,6 @@ type TopbarIconProps = HTMLAttributes<HTMLOrSVGElement>;
 export const TopbarIcon = forwardRef<HTMLOrSVGElement, TopbarIconProps>(
 	(props: TopbarIconProps, ref) => {
 		const { children, className, ...restProps } = props;
-		const theme = useTheme();
 
 		return cloneElement(
 			children as ReactElement<
@@ -102,10 +81,7 @@ export const TopbarIcon = forwardRef<HTMLOrSVGElement, TopbarIconProps>(
 			{
 				...restProps,
 				ref,
-				className: cn([
-					css({ fontSize: 16, color: theme.palette.text.disabled }),
-					"size-icon-sm",
-				]),
+				className: "text-base text-content-disabled size-icon-sm",
 			},
 		);
 	},

site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

@@ -213,13 +213,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 	return (
 		<>
 			<div css={{ height: "100%", display: "flex", flexDirection: "column" }}>
-				<Topbar
-					css={{
-						display: "grid",
-						gridTemplateColumns: "1fr 2fr 1fr",
-					}}
-					data-testid="topbar"
-				>
+				<Topbar className="grid grid-cols-[1fr_2fr_1fr]" data-testid="topbar">
 					<div>
 						<Tooltip>
 							<TooltipTrigger asChild>

site/src/pages/WorkspacePage/WorkspaceTopbar.tsx

@@ -124,7 +124,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 				<TooltipContent side="bottom">Back to workspaces</TooltipContent>
 			</Tooltip>
 
-			<div css={styles.topbarLeft}>
+			<div className="flex items-center gap-y-6 gap-x-2 flex-wrap px-3 py-2 mr-auto">
 				<TopbarData>
 					<OwnerBreadcrumb
 						ownerName={workspace.owner_name}
@@ -409,17 +409,6 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 };
 
 const styles = {
-	topbarLeft: {
-		display: "flex",
-		alignItems: "center",
-		columnGap: 24,
-		rowGap: 8,
-		flexWrap: "wrap",
-		// 12px - It is needed to keep vertical spacing when the content is wrapped
-		padding: "12px",
-		marginRight: "auto",
-	},
-
 	breadcrumbSegment: {
 		display: "flex",
 		alignItems: "center",