more fixes

BrunoQuaresma · BrunoQuaresma · commit cfacd1c9333f · 2025-10-08T17:44:52.000Z
diff --git a/site/src/pages/DeploymentSettingsPage/OptionsTable.tsx b/site/src/pages/DeploymentSettingsPage/OptionsTable.tsx
@@ -6,6 +6,7 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import type { SerpentOption } from "api/typesGenerated";
+import { TableHeader } from "components/Table/Table";
 import type { FC } from "react";
 import {
 	OptionConfig,
@@ -41,12 +42,12 @@ const OptionsTable: FC<OptionsTableProps> = ({ options, additionalValues }) => {
           }
         `}
 			>
-				<TableHead>
+				<TableHeader>
 					<TableRow>
-						<TableCell width="50%">Option</TableCell>
-						<TableCell width="50%">Value</TableCell>
+						<TableHead className="w-1/2">Option</TableHead>
+						<TableHead className="w-1/2">Value</TableHead>
 					</TableRow>
-				</TableHead>
+				</TableHeader>
 				<TableBody>
 					{Object.values(options).map((option) => {
 						return (
diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx
@@ -29,6 +29,7 @@ import {
 } from "components/SettingsHeader/SettingsHeader";
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
+import { TableHeader } from "components/Table/Table";
 import { useFormik } from "formik";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { type ChangeEvent, type FC, useState } from "react";
@@ -257,20 +258,17 @@ const ActionCheckboxes: FC<ActionCheckboxesProps> = ({
 	return (
 		<TableContainer>
 			<Table>
-				<TableHead>
+				<TableHeader>
 					<TableRow>
-						<TableCell>Permission</TableCell>
-						<TableCell
-							align="right"
-							sx={{ paddingTop: 0.4, paddingBottom: 0.4 }}
-						>
+						<TableHead>Permission</TableHead>
+						<TableHead className="text-right py-8">
 							<ShowAllResourcesCheckbox
 								showAllResources={showAllResources}
 								setShowAllResources={setShowAllResources}
 							/>
-						</TableCell>
+						</TableHead>
 					</TableRow>
-				</TableHead>
+				</TableHeader>
 				<TableBody>
 					{Object.entries(resourceActions).map(([resourceKey, value]) => {
 						return (
diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
@@ -6,7 +6,6 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Tooltip from "@mui/material/Tooltip";
-import visuallyHidden from "@mui/utils/visuallyHidden";
 import { externalAuthProvider } from "api/queries/externalAuth";
 import type {
 	ExternalAuthLink,
@@ -25,6 +24,7 @@ import {
 import { Loader } from "components/Loader/Loader";
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
+import { TableHeader } from "components/Table/Table";
 import { TableEmpty } from "components/TableEmpty/TableEmpty";
 import type { ExternalAuthPollingState } from "hooks/useExternalAuth";
 import { EllipsisVertical, RefreshCcwIcon } from "lucide-react";
@@ -60,17 +60,17 @@ export const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
 	return (
 		<TableContainer>
 			<Table>
-				<TableHead>
+				<TableHeader>
 					<TableRow>
-						<TableCell>Application</TableCell>
-						<TableCell>
-							<span aria-hidden css={{ ...visuallyHidden }}>
+						<TableHead>Application</TableHead>
+						<TableHead>
+							<span aria-hidden className="sr-only">
 								Link to connect
 							</span>
-						</TableCell>
-						<TableCell width="1%" />
+						</TableHead>
+						<TableHead className="w-[1%]" />
 					</TableRow>
-				</TableHead>
+				</TableHeader>
 				<TableBody>
 					{auths.providers === null || auths.providers?.length === 0 ? (
 						<TableEmpty message="No providers have been configured" />
