From 20b0b40ec8c9ebcf28c83b138dc913651f6bdf8c Mon Sep 17 00:00:00 2001
From: henrygd <hank@henrygd.me>
Date: Tue, 31 Mar 2026 15:40:52 -0400
Subject: [PATCH] ui: no centered dialog headings and a few other tweaks

---
 internal/site/src/components/alerts/alert-button.tsx      | 2 +-
 internal/site/src/components/navbar.tsx                   | 2 +-
 .../site/src/components/systems-table/systems-table.tsx   | 8 ++++----
 internal/site/src/components/ui/alert-dialog.tsx          | 2 +-
 internal/site/src/components/ui/card.tsx                  | 6 +-----
 internal/site/src/components/ui/dialog.tsx                | 2 +-
 internal/site/src/index.css                               | 4 ++++
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/internal/site/src/components/alerts/alert-button.tsx b/internal/site/src/components/alerts/alert-button.tsx
index bffe691d..05d8a1bc 100644
--- a/internal/site/src/components/alerts/alert-button.tsx
+++ b/internal/site/src/components/alerts/alert-button.tsx
@@ -20,7 +20,7 @@ export default memo(function AlertsButton({ system }: { system: SystemRecord })
 				<SheetTrigger asChild>
 					<Button variant="ghost" size="icon" aria-label={t`Alerts`} data-nolink onClick={() => setOpened(true)}>
 						<BellIcon
-							className={cn("h-[1.2em] w-[1.2em] pointer-events-none", {
+							className={cn("size-[1.2em] pointer-events-none", {
 								"fill-primary": hasSystemAlert,
 							})}
 						/>
diff --git a/internal/site/src/components/navbar.tsx b/internal/site/src/components/navbar.tsx
index 09981084..5352fd7a 100644
--- a/internal/site/src/components/navbar.tsx
+++ b/internal/site/src/components/navbar.tsx
@@ -63,7 +63,7 @@ export default function Navbar() {
 				className="p-2 ps-0 me-3 group"
 				onMouseEnter={runOnce(() => import("@/components/routes/home"))}
 			>
-				<Logo className="h-[1.1rem] md:h-5 fill-foreground" />
+				<Logo className="h-[1.2rem] md:h-5 fill-foreground" />
 			</Link>
 			<Button
 				variant="outline"
diff --git a/internal/site/src/components/systems-table/systems-table.tsx b/internal/site/src/components/systems-table/systems-table.tsx
index 0358a64e..6c24c8d1 100644
--- a/internal/site/src/components/systems-table/systems-table.tsx
+++ b/internal/site/src/components/systems-table/systems-table.tsx
@@ -460,14 +460,14 @@ const SystemCard = memo(
 						}
 					)}
 				>
-					<CardHeader className="py-1 ps-5 pe-3 bg-muted/30 border-b border-border/60">
-						<div className="flex items-center gap-2 w-full overflow-hidden">
-							<CardTitle className="text-base tracking-normal text-primary/90 flex items-center min-w-0 flex-1 gap-2.5">
+					<CardHeader className="py-1 ps-4 pe-2 bg-muted/30 border-b border-border/60">
+						<div className="flex items-center gap-1 w-full overflow-hidden">
+							<h3 className="text-primary/90 min-w-0 flex-1 gap-2.5 font-semibold">
 								<div className="flex items-center gap-2.5 min-w-0 flex-1">
 									<IndicatorDot system={system} />
 									<span className="text-[.95em]/normal tracking-normal text-primary/90 truncate">{system.name}</span>
 								</div>
-							</CardTitle>
+							</h3>
 							{table.getColumn("actions")?.getIsVisible() && (
 								<div className="flex gap-1 shrink-0 relative z-10">
 									<AlertButton system={system} />
diff --git a/internal/site/src/components/ui/alert-dialog.tsx b/internal/site/src/components/ui/alert-dialog.tsx
index ab18153b..67444b56 100644
--- a/internal/site/src/components/ui/alert-dialog.tsx
+++ b/internal/site/src/components/ui/alert-dialog.tsx
@@ -43,7 +43,7 @@ const AlertDialogContent = React.forwardRef<
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
 const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div className={cn("grid gap-2 text-center sm:text-start", className)} {...props} />
+	<div className={cn("grid gap-2 text-start", className)} {...props} />
 )
 AlertDialogHeader.displayName = "AlertDialogHeader"
 
diff --git a/internal/site/src/components/ui/card.tsx b/internal/site/src/components/ui/card.tsx
index 81997cce..f4eb9208 100644
--- a/internal/site/src/components/ui/card.tsx
+++ b/internal/site/src/components/ui/card.tsx
@@ -18,11 +18,7 @@ CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
 	({ className, ...props }, ref) => (
-		<h3
-			ref={ref}
-			className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
-			{...props}
-		/>
+		<h3 ref={ref} className={cn("text-card-title font-semibold leading-none tracking-tight", className)} {...props} />
 	)
 )
 CardTitle.displayName = "CardTitle"
diff --git a/internal/site/src/components/ui/dialog.tsx b/internal/site/src/components/ui/dialog.tsx
index 6510f5f2..c4e7bd07 100644
--- a/internal/site/src/components/ui/dialog.tsx
+++ b/internal/site/src/components/ui/dialog.tsx
@@ -52,7 +52,7 @@ const DialogContent = React.forwardRef<
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div className={cn("grid gap-1.5 text-center sm:text-start", className)} {...props} />
+	<div className={cn("grid gap-1.5 text-start", className)} {...props} />
 )
 DialogHeader.displayName = "DialogHeader"
 
diff --git a/internal/site/src/index.css b/internal/site/src/index.css
index d3bfc7b9..d9e26c9d 100644
--- a/internal/site/src/index.css
+++ b/internal/site/src/index.css
@@ -177,6 +177,10 @@
 	}
 }
 
+@utility text-card-title {
+	@apply text-[1.4rem] sm:text-2xl;
+}
+
 .recharts-tooltip-wrapper {
 	z-index: 51;
 	@apply tabular-nums;