fix: fix tabs styling

jaaydenh · jaaydenh · commit aebde7c280b7 · 2025-01-22T16:31:19.000Z
diff --git a/site/src/components/Tabs/Tabs.tsx b/site/src/components/Tabs/Tabs.tsx
@@ -2,7 +2,7 @@ import { type FC, type HTMLAttributes, createContext, useContext } from "react";
 import { Link, type LinkProps } from "react-router-dom";
 import { cn } from "utils/cn";
 
-export const TAB_PADDING_Y = 12;
+// Keeping this for now because of a workaround in WorkspaceBUildPageView
 export const TAB_PADDING_X = 16;
 
 type TabsContextValue = {
@@ -13,11 +13,13 @@ const TabsContext = createContext<TabsContextValue | undefined>(undefined);
 
 type TabsProps = HTMLAttributes<HTMLDivElement> & TabsContextValue;
 
-export const Tabs: FC<TabsProps> = ({ active, ...htmlProps }) => {
+export const Tabs: FC<TabsProps> = ({ className, active, ...htmlProps }) => {
 	return (
 		<TabsContext.Provider value={{ active }}>
 			<div
-				className="border-b border-solid border-border border-t-0 border-l-0 border-r-0"
+				// Because the Tailwind preflight is not used, its necessary to set border style to solid and
+				// reset all border widths to 0 https://tailwindcss.com/docs/border-width#using-without-preflight
+				className={cn("border-0 border-b border-solid border-border", className)}
 				{...htmlProps}
 			/>
 		</TabsContext.Provider>
diff --git a/site/src/pages/TemplatePage/TemplateLayout.tsx b/site/src/pages/TemplatePage/TemplateLayout.tsx
@@ -3,7 +3,7 @@ import type { AuthorizationRequest } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
-import { TAB_PADDING_Y, TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
+import { TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
 import {
 	type FC,
 	type PropsWithChildren,
@@ -110,7 +110,7 @@ export const TemplateLayout: FC<PropsWithChildren> = ({
 
 			<Tabs
 				active={activeTab}
-				css={{ marginBottom: 40, marginTop: -TAB_PADDING_Y }}
+				className="mb-10 -mt-3"
 			>
 				<Margins>
 					<TabsList>
diff --git a/site/src/pages/UsersPage/UsersLayout.tsx b/site/src/pages/UsersPage/UsersLayout.tsx
@@ -4,7 +4,7 @@ import Button from "@mui/material/Button";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
-import { TAB_PADDING_Y, TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
+import { TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
@@ -59,7 +59,7 @@ export const UsersLayout: FC = () => {
 
 			{!showOrganizations && (
 				<Tabs
-					css={{ marginBottom: 40, marginTop: -TAB_PADDING_Y }}
+					className="mb-10 -mt-3"
 					active={activeTab}
 				>
 					<Margins>
