ui: no centered dialog headings and a few other tweaks

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,
 							})}
 						/>

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"

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} />

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"
 

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"

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"
 

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;