From f4e75493115662d4d9965ce1beea56841202a418 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 9 Oct 2025 07:23:03 -0500
Subject: [PATCH] UI tweaks (#20401)

* font changes to better match figma

* fix alignment in debug view
---
 web/src/components/mobile/MobilePage.tsx      |  2 +-
 .../components/overlay/RoleChangeDialog.tsx   |  2 +-
 .../overlay/detail/SearchDetailDialog.tsx     |  6 +--
 web/src/components/ui/alert.tsx               | 26 +++++------
 web/src/components/ui/card.tsx                | 44 ++++++++++---------
 web/src/components/ui/dialog.tsx              |  5 +--
 web/src/components/ui/drawer.tsx              |  5 +--
 web/src/components/ui/heading.tsx             | 32 +++-----------
 web/src/pages/Settings.tsx                    |  2 +-
 web/src/views/settings/ObjectSettingsView.tsx |  4 +-
 10 files changed, 51 insertions(+), 77 deletions(-)

diff --git a/web/src/components/mobile/MobilePage.tsx b/web/src/components/mobile/MobilePage.tsx
index 776831541..b5084d65a 100644
--- a/web/src/components/mobile/MobilePage.tsx
+++ b/web/src/components/mobile/MobilePage.tsx
@@ -222,7 +222,7 @@ export function MobilePageHeader({
 type MobilePageTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 
 export function MobilePageTitle({ className, ...props }: MobilePageTitleProps) {
-  return <h2 className={cn("text-lg font-semibold", className)} {...props} />;
+  return <h2 className={cn("text-lg", className)} {...props} />;
 }
 
 type MobilePageDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
diff --git a/web/src/components/overlay/RoleChangeDialog.tsx b/web/src/components/overlay/RoleChangeDialog.tsx
index c8b356665..2e4399033 100644
--- a/web/src/components/overlay/RoleChangeDialog.tsx
+++ b/web/src/components/overlay/RoleChangeDialog.tsx
@@ -42,7 +42,7 @@ export default function RoleChangeDialog({
     <Dialog open={show} onOpenChange={onCancel}>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
-          <DialogTitle className="text-xl font-semibold">
+          <DialogTitle className="text-xl">
             {t("users.dialog.changeRole.title")}
           </DialogTitle>
           <DialogDescription>
diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index d6724404d..3a016588a 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -1170,11 +1170,7 @@ export function ObjectSnapshotTab({
                 <Card className="p-1 text-sm md:p-2">
                   <CardContent className="flex flex-col items-center justify-between gap-3 p-2 md:flex-row">
                     <div className={cn("flex flex-col space-y-3")}>
-                      <div
-                        className={
-                          "text-lg font-semibold leading-none tracking-tight"
-                        }
-                      >
+                      <div className={"text-lg leading-none"}>
                         {t("explore.plus.submitToPlus.label")}
                       </div>
                       <div className="text-sm text-muted-foreground">
diff --git a/web/src/components/ui/alert.tsx b/web/src/components/ui/alert.tsx
index 41fa7e056..32005241a 100644
--- a/web/src/components/ui/alert.tsx
+++ b/web/src/components/ui/alert.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
@@ -16,8 +16,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -29,8 +29,8 @@ const Alert = React.forwardRef<
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-))
-Alert.displayName = "Alert"
+));
+Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -38,11 +38,11 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h5
     ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    className={cn("mb-1 font-medium leading-none", className)}
     {...props}
   />
-))
-AlertTitle.displayName = "AlertTitle"
+));
+AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,7 +53,7 @@ const AlertDescription = React.forwardRef<
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
   />
-))
-AlertDescription.displayName = "AlertDescription"
+));
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };
diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx
index afa13ecfa..b1072ded4 100644
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -10,12 +10,12 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
+      className,
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -35,14 +35,11 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
+    className={cn("text-2xl font-semibold leading-none", className)}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,16 +50,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -73,7 +70,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
index c7117cd3f..761d815be 100644
--- a/web/src/components/ui/dialog.tsx
+++ b/web/src/components/ui/dialog.tsx
@@ -149,10 +149,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className,
-    )}
+    className={cn("text-lg font-semibold leading-none", className)}
     {...props}
   />
 ));
diff --git a/web/src/components/ui/drawer.tsx b/web/src/components/ui/drawer.tsx
index 25c4acded..220708e7e 100644
--- a/web/src/components/ui/drawer.tsx
+++ b/web/src/components/ui/drawer.tsx
@@ -85,10 +85,7 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className,
-    )}
+    className={cn("text-lg font-semibold leading-none", className)}
     {...props}
   />
 ));
diff --git a/web/src/components/ui/heading.tsx b/web/src/components/ui/heading.tsx
index 782c1f0e7..2b749a009 100644
--- a/web/src/components/ui/heading.tsx
+++ b/web/src/components/ui/heading.tsx
@@ -14,12 +14,7 @@ const Heading = ({
   switch (as) {
     case "h1":
       return (
-        <h1
-          className={cn(
-            "scroll-m-20 text-3xl font-extrabold tracking-tight",
-            className
-          )}
-        >
+        <h1 className={cn("scroll-m-20 text-3xl font-extrabold", className)}>
           {children}
         </h1>
       );
@@ -27,8 +22,8 @@ const Heading = ({
       return (
         <h2
           className={cn(
-            "scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0 mb-3",
-            className
+            "mb-3 scroll-m-20 text-3xl font-semibold transition-colors first:mt-0",
+            className,
           )}
         >
           {children}
@@ -36,34 +31,19 @@ const Heading = ({
       );
     case "h3":
       return (
-        <h3
-          className={cn(
-            "scroll-m-20 text-2xl font-semibold tracking-tight mb-3",
-            className
-          )}
-        >
+        <h3 className={cn("mb-3 scroll-m-20 text-2xl font-medium", className)}>
           {children}
         </h3>
       );
     case "h4":
       return (
-        <h4
-          className={cn(
-            "scroll-m-20 text-xl font-semibold tracking-tight",
-            className
-          )}
-        >
+        <h4 className={cn("scroll-m-20 text-xl font-medium", className)}>
           {children}
         </h4>
       );
     default:
       return (
-        <h1
-          className={cn(
-            "scroll-m-20 text-3xl font-extrabold tracking-tight",
-            className
-          )}
-        >
+        <h1 className={cn("scroll-m-20 text-3xl font-extrabold", className)}>
           {children}
         </h1>
       );
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index aebbe1692..a4a9a17d5 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -292,7 +292,7 @@ export default function Settings() {
                 <Logo className="h-8" />
               </div>
               <div className="flex flex-row text-center">
-                <h2 className="ml-2 text-lg font-semibold">
+                <h2 className="ml-2 text-lg">
                   {t("menu.settings", { ns: "common" })}
                 </h2>
               </div>
diff --git a/web/src/views/settings/ObjectSettingsView.tsx b/web/src/views/settings/ObjectSettingsView.tsx
index 169e50e20..c326b0558 100644
--- a/web/src/views/settings/ObjectSettingsView.tsx
+++ b/web/src/views/settings/ObjectSettingsView.tsx
@@ -162,9 +162,9 @@ export default function ObjectSettingsView({
   }
 
   return (
-    <div className="flex size-full flex-col md:flex-row">
+    <div className="mt-1 flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:w-3/12">
+      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
         <Heading as="h4" className="mb-2">
           {t("debug.title")}
         </Heading>