From a3bd2a0c4f2875997afb76b73fcb7cf6a06db4fe Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 15 Apr 2025 14:37:09 +0000
Subject: [PATCH 1/3] refactor: update the workspace table design

---
 site/src/hooks/useClickableTableRow.ts        |  22 +-
 .../pages/TemplatesPage/TemplatesPageView.tsx |   4 +-
 site/src/pages/WorkspacesPage/LastUsed.tsx    |   7 +-
 .../WorkspacesPage/WorkspacesPageView.tsx     |   2 +-
 .../pages/WorkspacesPage/WorkspacesTable.tsx  | 403 ++++++++----------
 5 files changed, 194 insertions(+), 244 deletions(-)

diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts
index 1967762aa24dc..9c30ecd7cafe8 100644
--- a/site/src/hooks/useClickableTableRow.ts
+++ b/site/src/hooks/useClickableTableRow.ts
@@ -13,7 +13,6 @@
  * It might not make sense to test this hook until the underlying design
  * problems are fixed.
  */
-import { type CSSObject, useTheme } from "@emotion/react";
 import type { TableRowProps } from "@mui/material/TableRow";
 import type { MouseEventHandler } from "react";
 import {
@@ -21,12 +20,13 @@ import {
 	type UseClickableResult,
 	useClickable,
 } from "./useClickable";
+import { cn } from "utils/cn";
 
 type UseClickableTableRowResult<
 	TRole extends ClickableAriaRole = ClickableAriaRole,
 > = UseClickableResult<HTMLTableRowElement, TRole> &
 	TableRowProps & {
-		css: CSSObject;
+		className: string;
 		hover: true;
 		onAuxClick: MouseEventHandler<HTMLTableRowElement>;
 	};
@@ -54,23 +54,13 @@ export const useClickableTableRow = <
 	onAuxClick: externalOnAuxClick,
 }: UseClickableTableRowConfig<TRole>): UseClickableTableRowResult<TRole> => {
 	const clickableProps = useClickable(onClick, (role ?? "button") as TRole);
-	const theme = useTheme();
 
 	return {
 		...clickableProps,
-		css: {
-			cursor: "pointer",
-
-			"&:focus": {
-				outline: `1px solid ${theme.palette.primary.main}`,
-				outlineOffset: -1,
-			},
-
-			"&:last-of-type": {
-				borderBottomLeftRadius: 8,
-				borderBottomRightRadius: 8,
-			},
-		},
+		className: cn([
+			"cursor-pointer hover:outline focus:outline -outline-offset-1 outline-border-hover",
+			"first:rounded-t-md last:rounded-b-md",
+		]),
 		hover: true,
 		onDoubleClick,
 		onAuxClick: (event) => {
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index 3a4e5a7812f09..30b1cd5093185 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -102,7 +102,7 @@ const TemplateRow: FC<TemplateRowProps> = ({
 	);
 	const navigate = useNavigate();
 
-	const { css: clickableCss, ...clickableRow } = useClickableTableRow({
+	const clickableRow = useClickableTableRow({
 		onClick: () => navigate(templatePageLink),
 	});
 
@@ -111,7 +111,7 @@ const TemplateRow: FC<TemplateRowProps> = ({
 			key={template.id}
 			data-testid={`template-${template.id}`}
 			{...clickableRow}
-			css={[clickableCss, styles.tableRow]}
+			css={styles.tableRow}
 		>
 			<TableCell>
 				<AvatarData
diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx
index a53ea5ed5ba01..e4a80fe51ba6f 100644
--- a/site/src/pages/WorkspacesPage/LastUsed.tsx
+++ b/site/src/pages/WorkspacesPage/LastUsed.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import { Stack } from "components/Stack/Stack";
 import { StatusIndicatorDot } from "components/StatusIndicator/StatusIndicator";
 import dayjs from "dayjs";
@@ -12,8 +11,6 @@ interface LastUsedProps {
 }
 
 export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
-	const theme = useTheme();
-
 	const [circle, message] = useTime(() => {
 		const t = dayjs(lastUsedAt);
 		const now = dayjs();
@@ -40,7 +37,7 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
 
 	return (
 		<Stack
-			style={{ color: theme.palette.text.secondary }}
+			className="text-content-secondary"
 			direction="row"
 			spacing={1}
 			alignItems="center"
@@ -49,4 +46,4 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
 			<span data-chromatic="ignore">{message}</span>
 		</Stack>
 	);
-};
+};
\ No newline at end of file
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index b6a474f57b220..2c501b0670808 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -239,4 +239,4 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 			)}
 		</Margins>
 	);
-};
+};
\ No newline at end of file
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index 5f6d32614abf1..0717b71cd0ad2 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -1,15 +1,7 @@
-import { useTheme } from "@emotion/react";
 import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import Star from "@mui/icons-material/Star";
 import Checkbox from "@mui/material/Checkbox";
 import Skeleton from "@mui/material/Skeleton";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import { visuallyHidden } from "@mui/utils";
 import type {
 	Template,
 	Workspace,
@@ -21,6 +13,14 @@ import { AvatarData } from "components/Avatar/AvatarData";
 import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton";
 import { InfoTooltip } from "components/InfoTooltip/InfoTooltip";
 import { Stack } from "components/Stack/Stack";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "components/Table/Table";
 import {
 	TableLoaderSkeleton,
 	TableRowSkeleton,
@@ -36,6 +36,7 @@ import { type FC, type ReactNode, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { getDisplayWorkspaceTemplateName } from "utils/workspace";
 import { WorkspacesEmpty } from "./WorkspacesEmpty";
+import { cn } from "utils/cn";
 
 export interface WorkspacesTableProps {
 	workspaces?: readonly Workspace[];
@@ -59,7 +60,6 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 	templates,
 	canCreateTemplate,
 }) => {
-	const theme = useTheme();
 	const dashboard = useDashboard();
 	const workspaceIDToAppByStatus = useMemo(() => {
 		return (
@@ -96,213 +96,185 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 	);
 
 	return (
-		<TableContainer>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableCell width={hasAppStatus ? "30%" : "40%"}>
-							<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
-								{canCheckWorkspaces && (
-									<Checkbox
-										// Remove the extra padding added for the first cell in the
-										// table
-										css={{
-											marginLeft: "-20px",
-											// MUI by default adds 9px padding to enhance the
-											// clickable area. We aim to prevent this from impacting
-											// the layout of surrounding elements.
-											marginTop: -9,
-											marginBottom: -9,
-										}}
-										disabled={!workspaces || workspaces.length === 0}
-										checked={checkedWorkspaces.length === workspaces?.length}
-										size="xsmall"
-										onChange={(_, checked) => {
-											if (!workspaces) {
-												return;
-											}
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead className={hasAppStatus ? "w-[30%]" : "w-[40%]"}>
+						<div className="flex items-center gap-2">
+							{canCheckWorkspaces && (
+								<Checkbox
+									className="-my-[9px]"
+									disabled={!workspaces || workspaces.length === 0}
+									checked={checkedWorkspaces.length === workspaces?.length}
+									size="xsmall"
+									onChange={(_, checked) => {
+										if (!workspaces) {
+											return;
+										}
 
-											if (!checked) {
-												onCheckChange([]);
-											} else {
-												onCheckChange(workspaces);
-											}
-										}}
-									/>
-								)}
-								Name
-							</div>
+										if (!checked) {
+											onCheckChange([]);
+										} else {
+											onCheckChange(workspaces);
+										}
+									}}
+								/>
+							)}
+							Name
+						</div>
+					</TableHead>
+					{hasAppStatus && <TableHead className="w-[30%]">Activity</TableHead>}
+					<TableHead className="w-[25%]">Template</TableHead>
+					<TableHead className="w-[20%]">Last used</TableHead>
+					<TableHead className="w-[15%]">Status</TableHead>
+					<TableHead className="w-[1%]" />
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{!workspaces && <TableLoader canCheckWorkspaces={canCheckWorkspaces} />}
+				{workspaces && workspaces.length === 0 && (
+					<TableRow>
+						<TableCell colSpan={999}>
+							<WorkspacesEmpty
+								templates={templates}
+								isUsingFilter={isUsingFilter}
+								canCreateTemplate={canCreateTemplate}
+							/>
 						</TableCell>
-						{hasAppStatus && <TableCell width="30%">Activity</TableCell>}
-						<TableCell width="25%">Template</TableCell>
-						<TableCell width="20%">Last used</TableCell>
-						<TableCell width="15%">Status</TableCell>
-						<TableCell width="1%" />
 					</TableRow>
-				</TableHead>
-				<TableBody>
-					{!workspaces && (
-						<TableLoader canCheckWorkspaces={canCheckWorkspaces} />
-					)}
-					{workspaces && workspaces.length === 0 && (
-						<WorkspacesEmpty
-							templates={templates}
-							isUsingFilter={isUsingFilter}
-							canCreateTemplate={canCreateTemplate}
-						/>
-					)}
-					{workspaces?.map((workspace) => {
-						const checked = checkedWorkspaces.some(
-							(w) => w.id === workspace.id,
-						);
-						const activeOrg = dashboard.organizations.find(
-							(o) => o.id === workspace.organization_id,
-						);
+				)}
+				{workspaces?.map((workspace) => {
+					const checked = checkedWorkspaces.some((w) => w.id === workspace.id);
+					const activeOrg = dashboard.organizations.find(
+						(o) => o.id === workspace.organization_id,
+					);
 
-						return (
-							<WorkspacesRow
-								workspace={workspace}
-								key={workspace.id}
-								checked={checked}
-							>
-								<TableCell>
-									<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
-										{canCheckWorkspaces && (
-											<Checkbox
-												// Remove the extra padding added for the first cell in the
-												// table
-												css={{
-													marginLeft: "-20px",
-												}}
-												data-testid={`checkbox-${workspace.id}`}
-												size="xsmall"
-												disabled={cantBeChecked(workspace)}
-												checked={checked}
-												onClick={(e) => {
-													e.stopPropagation();
-												}}
-												onChange={(e) => {
-													if (e.currentTarget.checked) {
-														onCheckChange([...checkedWorkspaces, workspace]);
-													} else {
-														onCheckChange(
-															checkedWorkspaces.filter(
-																(w) => w.id !== workspace.id,
-															),
-														);
-													}
-												}}
-											/>
-										)}
-										<AvatarData
-											title={
-												<Stack
-													direction="row"
-													spacing={0.5}
-													alignItems="center"
-												>
-													{workspace.name}
-													{workspace.favorite && (
-														<Star css={{ width: 16, height: 16 }} />
-													)}
-													{workspace.outdated && (
-														<WorkspaceOutdatedTooltip
-															organizationName={workspace.organization_name}
-															templateName={workspace.template_name}
-															latestVersionId={
-																workspace.template_active_version_id
-															}
-															onUpdateVersion={() => {
-																onUpdateWorkspace(workspace);
-															}}
-														/>
-													)}
-												</Stack>
-											}
-											subtitle={
-												<div>
-													<span css={{ ...visuallyHidden }}>Owner: </span>
-													{workspace.owner_name}
-												</div>
-											}
-											avatar={
-												<Avatar
-													variant="icon"
-													src={workspace.template_icon}
-													fallback={workspace.name}
-													size="lg"
-												/>
-											}
-										/>
-									</div>
-								</TableCell>
-
-								{hasAppStatus && (
-									<TableCell>
-										<WorkspaceAppStatus
-											workspace={workspace}
-											agent={workspaceIDToAppByStatus[workspace.id]?.agent}
-											app={workspaceIDToAppByStatus[workspace.id]?.app}
-											status={workspace.latest_app_status}
-										/>
-									</TableCell>
-								)}
-
-								<TableCell>
-									<div>{getDisplayWorkspaceTemplateName(workspace)}</div>
-
-									{dashboard.showOrganizations && (
-										<div
-											css={{
-												fontSize: 13,
-												color: theme.palette.text.secondary,
-												lineHeight: 1.5,
+					return (
+						<WorkspacesRow
+							workspace={workspace}
+							key={workspace.id}
+							checked={checked}
+						>
+							<TableCell>
+								<div className="flex items-center gap-2">
+									{canCheckWorkspaces && (
+										<Checkbox
+											data-testid={`checkbox-${workspace.id}`}
+											size="xsmall"
+											disabled={cantBeChecked(workspace)}
+											checked={checked}
+											onClick={(e) => {
+												e.stopPropagation();
+											}}
+											onChange={(e) => {
+												if (e.currentTarget.checked) {
+													onCheckChange([...checkedWorkspaces, workspace]);
+												} else {
+													onCheckChange(
+														checkedWorkspaces.filter(
+															(w) => w.id !== workspace.id,
+														),
+													);
+												}
 											}}
-										>
-											<span css={{ ...visuallyHidden }}>Organization: </span>
-											{activeOrg?.display_name || workspace.organization_name}
-										</div>
+										/>
 									)}
-								</TableCell>
+									<AvatarData
+										title={
+											<Stack direction="row" spacing={0.5} alignItems="center">
+												{workspace.name}
+												{workspace.favorite && <Star className="w-4 h-4" />}
+												{workspace.outdated && (
+													<WorkspaceOutdatedTooltip
+														organizationName={workspace.organization_name}
+														templateName={workspace.template_name}
+														latestVersionId={
+															workspace.template_active_version_id
+														}
+														onUpdateVersion={() => {
+															onUpdateWorkspace(workspace);
+														}}
+													/>
+												)}
+											</Stack>
+										}
+										subtitle={
+											<div>
+												<span className="sr-only">Owner: </span>
+												{workspace.owner_name}
+											</div>
+										}
+										avatar={
+											<Avatar
+												src={workspace.owner_avatar_url}
+												fallback={workspace.owner_name}
+												size="lg"
+											/>
+										}
+									/>
+								</div>
+							</TableCell>
 
+							{hasAppStatus && (
 								<TableCell>
-									<LastUsed lastUsedAt={workspace.last_used_at} />
+									<WorkspaceAppStatus
+										workspace={workspace}
+										agent={workspaceIDToAppByStatus[workspace.id]?.agent}
+										app={workspaceIDToAppByStatus[workspace.id]?.app}
+										status={workspace.latest_app_status}
+									/>
 								</TableCell>
+							)}
 
-								<TableCell>
-									<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
-										<WorkspaceStatusBadge workspace={workspace} />
-										{workspace.latest_build.status === "running" &&
-											!workspace.health.healthy && (
-												<InfoTooltip
-													type="warning"
-													title="Workspace is unhealthy"
-													message="Your workspace is running but some agents are unhealthy."
-												/>
-											)}
-										{workspace.dormant_at && (
-											<WorkspaceDormantBadge workspace={workspace} />
+							<TableCell>
+								<AvatarData
+									title={getDisplayWorkspaceTemplateName(workspace)}
+									subtitle={
+										dashboard.showOrganizations &&
+										(activeOrg?.display_name || workspace.organization_name)
+									}
+									avatar={
+										<Avatar
+											variant="icon"
+											src={workspace.template_icon}
+											fallback={getDisplayWorkspaceTemplateName(workspace)}
+											size="lg"
+										/>
+									}
+								/>
+							</TableCell>
+
+							<TableCell>
+								<LastUsed lastUsedAt={workspace.last_used_at} />
+							</TableCell>
+
+							<TableCell>
+								<div className="flex items-center gap-2">
+									<WorkspaceStatusBadge workspace={workspace} />
+									{workspace.latest_build.status === "running" &&
+										!workspace.health.healthy && (
+											<InfoTooltip
+												type="warning"
+												title="Workspace is unhealthy"
+												message="Your workspace is running but some agents are unhealthy."
+											/>
 										)}
-									</div>
-								</TableCell>
+									{workspace.dormant_at && (
+										<WorkspaceDormantBadge workspace={workspace} />
+									)}
+								</div>
+							</TableCell>
 
-								<TableCell>
-									<div css={{ display: "flex", paddingLeft: 16 }}>
-										<KeyboardArrowRight
-											css={{
-												color: theme.palette.text.secondary,
-												width: 20,
-												height: 20,
-											}}
-										/>
-									</div>
-								</TableCell>
-							</WorkspacesRow>
-						);
-					})}
-				</TableBody>
-			</Table>
-		</TableContainer>
+							<TableCell>
+								<div className="flex pl-4">
+									<KeyboardArrowRight className="text-content-secondary w-5 h-5" />
+								</div>
+							</TableCell>
+						</WorkspacesRow>
+					);
+				})}
+			</TableBody>
+		</Table>
 	);
 };
 
@@ -318,7 +290,6 @@ const WorkspacesRow: FC<WorkspacesRowProps> = ({
 	checked,
 }) => {
 	const navigate = useNavigate();
-	const theme = useTheme();
 
 	const workspacePageLink = `/@${workspace.owner_name}/${workspace.name}`;
 	const openLinkInNewTab = () => window.open(workspacePageLink, "_blank");
@@ -339,20 +310,14 @@ const WorkspacesRow: FC<WorkspacesRowProps> = ({
 		},
 	});
 
-	const bgColor = checked ? theme.palette.action.hover : undefined;
-
 	return (
 		<TableRow
 			{...clickableProps}
 			data-testid={`workspace-${workspace.id}`}
-			css={{
-				...clickableProps.css,
-				backgroundColor: bgColor,
-
-				"&:hover": {
-					backgroundColor: `${bgColor} !important`,
-				},
-			}}
+			className={cn([
+				checked ? "bg-muted hover:bg-muted" : undefined,
+				clickableProps.className,
+			])}
 		>
 			{children}
 		</TableRow>
@@ -367,11 +332,9 @@ const TableLoader: FC<TableLoaderProps> = ({ canCheckWorkspaces }) => {
 	return (
 		<TableLoaderSkeleton>
 			<TableRowSkeleton>
-				<TableCell width="40%">
-					<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
-						{canCheckWorkspaces && (
-							<Checkbox size="small" disabled css={{ marginLeft: "-20px" }} />
-						)}
+				<TableCell className="w-2/5">
+					<div className="flex items-center gap-2">
+						{canCheckWorkspaces && <Checkbox size="small" disabled />}
 						<AvatarDataSkeleton />
 					</div>
 				</TableCell>

From 62a89d85fa053e1fb16a2cae147af1b451ccca6d Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 15 Apr 2025 14:38:54 +0000
Subject: [PATCH 2/3] FMT

---
 site/src/hooks/useClickableTableRow.ts               | 2 +-
 site/src/pages/WorkspacesPage/LastUsed.tsx           | 2 +-
 site/src/pages/WorkspacesPage/WorkspacesPageView.tsx | 2 +-
 site/src/pages/WorkspacesPage/WorkspacesTable.tsx    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts
index 9c30ecd7cafe8..21e42d236e4a8 100644
--- a/site/src/hooks/useClickableTableRow.ts
+++ b/site/src/hooks/useClickableTableRow.ts
@@ -15,12 +15,12 @@
  */
 import type { TableRowProps } from "@mui/material/TableRow";
 import type { MouseEventHandler } from "react";
+import { cn } from "utils/cn";
 import {
 	type ClickableAriaRole,
 	type UseClickableResult,
 	useClickable,
 } from "./useClickable";
-import { cn } from "utils/cn";
 
 type UseClickableTableRowResult<
 	TRole extends ClickableAriaRole = ClickableAriaRole,
diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx
index e4a80fe51ba6f..b0ca728468c51 100644
--- a/site/src/pages/WorkspacesPage/LastUsed.tsx
+++ b/site/src/pages/WorkspacesPage/LastUsed.tsx
@@ -46,4 +46,4 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
 			<span data-chromatic="ignore">{message}</span>
 		</Stack>
 	);
-};
\ No newline at end of file
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index 2c501b0670808..b6a474f57b220 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -239,4 +239,4 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 			)}
 		</Margins>
 	);
-};
\ No newline at end of file
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index 0717b71cd0ad2..e22715fb06b03 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -34,9 +34,9 @@ import { WorkspaceStatusBadge } from "modules/workspaces/WorkspaceStatusBadge/Wo
 import { LastUsed } from "pages/WorkspacesPage/LastUsed";
 import { type FC, type ReactNode, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
+import { cn } from "utils/cn";
 import { getDisplayWorkspaceTemplateName } from "utils/workspace";
 import { WorkspacesEmpty } from "./WorkspacesEmpty";
-import { cn } from "utils/cn";
 
 export interface WorkspacesTableProps {
 	workspaces?: readonly Workspace[];

From 244d1cfcd5284c0cbe82b99cc1dfbbe9c3afed09 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 15 Apr 2025 16:44:20 +0000
Subject: [PATCH 3/3] Fixes

---
 site/src/hooks/useClickableTableRow.ts        |  2 +-
 .../pages/WorkspacesPage/WorkspacesTable.tsx  | 40 ++++++++++---------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts
index 21e42d236e4a8..5f10c637b8de3 100644
--- a/site/src/hooks/useClickableTableRow.ts
+++ b/site/src/hooks/useClickableTableRow.ts
@@ -58,7 +58,7 @@ export const useClickableTableRow = <
 	return {
 		...clickableProps,
 		className: cn([
-			"cursor-pointer hover:outline focus:outline -outline-offset-1 outline-border-hover",
+			"cursor-pointer hover:outline focus:outline outline-1 -outline-offset-1 outline-border-hover",
 			"first:rounded-t-md last:rounded-b-md",
 		]),
 		hover: true,
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index e22715fb06b03..9fe72c23910e5 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -99,7 +99,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 		<Table>
 			<TableHeader>
 				<TableRow>
-					<TableHead className={hasAppStatus ? "w-[30%]" : "w-[40%]"}>
+					<TableHead className={hasAppStatus ? "w-1/6" : "w-2/6"}>
 						<div className="flex items-center gap-2">
 							{canCheckWorkspaces && (
 								<Checkbox
@@ -123,14 +123,14 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 							Name
 						</div>
 					</TableHead>
-					{hasAppStatus && <TableHead className="w-[30%]">Activity</TableHead>}
-					<TableHead className="w-[25%]">Template</TableHead>
-					<TableHead className="w-[20%]">Last used</TableHead>
-					<TableHead className="w-[15%]">Status</TableHead>
-					<TableHead className="w-[1%]" />
+					{hasAppStatus && <TableHead className="w-2/6">Activity</TableHead>}
+					<TableHead className="w-2/6">Template</TableHead>
+					<TableHead className="w-1/6">Last used</TableHead>
+					<TableHead className="w-1/6">Status</TableHead>
+					<TableHead className="w-0" />
 				</TableRow>
 			</TableHeader>
-			<TableBody>
+			<TableBody className="[&_td]:h-[72px]">
 				{!workspaces && <TableLoader canCheckWorkspaces={canCheckWorkspaces} />}
 				{workspaces && workspaces.length === 0 && (
 					<TableRow>
@@ -230,8 +230,12 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 								<AvatarData
 									title={getDisplayWorkspaceTemplateName(workspace)}
 									subtitle={
-										dashboard.showOrganizations &&
-										(activeOrg?.display_name || workspace.organization_name)
+										dashboard.showOrganizations && (
+											<>
+												<span className="sr-only">Organization:</span>{" "}
+												{activeOrg?.display_name || workspace.organization_name}
+											</>
+										)
 									}
 									avatar={
 										<Avatar
@@ -332,23 +336,23 @@ const TableLoader: FC<TableLoaderProps> = ({ canCheckWorkspaces }) => {
 	return (
 		<TableLoaderSkeleton>
 			<TableRowSkeleton>
-				<TableCell className="w-2/5">
+				<TableCell className="w-2/6">
 					<div className="flex items-center gap-2">
 						{canCheckWorkspaces && <Checkbox size="small" disabled />}
 						<AvatarDataSkeleton />
 					</div>
 				</TableCell>
-				<TableCell>
-					<Skeleton variant="text" width="25%" />
+				<TableCell className="w-2/6">
+					<AvatarDataSkeleton />
 				</TableCell>
-				<TableCell>
-					<Skeleton variant="text" width="25%" />
+				<TableCell className="w-1/6">
+					<Skeleton variant="text" width="75%" />
 				</TableCell>
-				<TableCell>
-					<Skeleton variant="text" width="25%" />
+				<TableCell className="w-1/6">
+					<Skeleton variant="text" width="75%" />
 				</TableCell>
-				<TableCell>
-					<Skeleton variant="text" width="25%" />
+				<TableCell className="w-0">
+					<Skeleton variant="text" width="75%" />
 				</TableCell>
 			</TableRowSkeleton>
 		</TableLoaderSkeleton>

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17404.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17404.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17404.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17404.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>