From 3c51d18ad61e3cf33a81953b82fbfd22ff1a8215 Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Thu, 11 Sep 2025 08:50:07 +0200
Subject: [PATCH] fix: font commitmono (#1351)

* fix: font commitmono

* chore: remove style
---
 .../src/components/content/section.tsx        |  2 +-
 .../data-table/status-pages/columns.tsx       |  2 +-
 .../src/components/metric/metric-card.tsx     |  5 ++++-
 .../src/components/nav/nav-breadcrumb.tsx     | 22 +++++++++++--------
 .../dashboard/src/components/nav/nav-help.tsx |  5 ++++-
 .../src/components/nav/nav-monitors.tsx       |  2 +-
 .../src/components/nav/nav-overview.tsx       |  2 +-
 .../src/components/nav/nav-status-pages.tsx   |  2 +-
 .../dashboard/src/components/nav/nav-user.tsx | 12 +++++-----
 .../src/components/nav/workspace-switcher.tsx | 10 ++++-----
 .../components/chart/chart-tooltip-number.tsx |  4 ++--
 .../src/components/content/metric-card.tsx    |  6 ++---
 12 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/apps/dashboard/src/components/content/section.tsx b/apps/dashboard/src/components/content/section.tsx
index 99c14efbe..20b1bf157 100644
--- a/apps/dashboard/src/components/content/section.tsx
+++ b/apps/dashboard/src/components/content/section.tsx
@@ -50,7 +50,7 @@ export function SectionDescription({
   return (
     <p
       className={cn(
-        "font-commit-mono text-muted-foreground text-sm",
+        "font-commit-mono text-muted-foreground text-sm tracking-tight",
         className,
       )}
       {...props}
diff --git a/apps/dashboard/src/components/data-table/status-pages/columns.tsx b/apps/dashboard/src/components/data-table/status-pages/columns.tsx
index 2fc4e605c..47cd03d17 100644
--- a/apps/dashboard/src/components/data-table/status-pages/columns.tsx
+++ b/apps/dashboard/src/components/data-table/status-pages/columns.tsx
@@ -36,7 +36,7 @@ export const columns: ColumnDef<StatusPage>[] = [
       return (
         <img
           src={`${value}`}
-          alt={`Favicon for ${row.getValue("name")}`}
+          alt={`Favicon for ${row.getValue("title")}`}
           className="h-4 w-4 rounded border bg-muted"
         />
       );
diff --git a/apps/dashboard/src/components/metric/metric-card.tsx b/apps/dashboard/src/components/metric/metric-card.tsx
index df14e2fb4..482ab5010 100644
--- a/apps/dashboard/src/components/metric/metric-card.tsx
+++ b/apps/dashboard/src/components/metric/metric-card.tsx
@@ -50,7 +50,10 @@ export function MetricCardTitle({
 }: React.ComponentProps<"p">) {
   return (
     <p
-      className={cn("font-commit-mono font-medium text-sm ", className)}
+      className={cn(
+        "font-commit-mono font-medium text-sm tracking-tight ",
+        className,
+      )}
       {...props}
     >
       {children}
diff --git a/apps/dashboard/src/components/nav/nav-breadcrumb.tsx b/apps/dashboard/src/components/nav/nav-breadcrumb.tsx
index 2ecf3ac18..dcea2a3ac 100644
--- a/apps/dashboard/src/components/nav/nav-breadcrumb.tsx
+++ b/apps/dashboard/src/components/nav/nav-breadcrumb.tsx
@@ -53,17 +53,21 @@ export function NavBreadcrumb({ items }: NavBreadcrumbProps) {
           <Fragment key={`${item.type}-${i}`}>
             <BreadcrumbItem>
               {item.type === "link" ? (
-                <BreadcrumbLink className="hidden md:block" asChild>
-                  <>
+                <BreadcrumbLink
+                  className="hidden flex-nowrap items-center gap-1.5 md:flex"
+                  asChild
+                >
+                  <Link
+                    href={item.href}
+                    className="font-commit-mono tracking-tight"
+                  >
                     {item.icon && <item.icon size={16} aria-hidden="true" />}
-                    <Link href={item.href} className="font-commit-mono">
-                      {item.label}
-                    </Link>
-                  </>
+                    {item.label}
+                  </Link>
                 </BreadcrumbLink>
               ) : null}
               {item.type === "page" ? (
-                <BreadcrumbPage className=" hidden max-w-[120px] truncate font-commit-mono md:block lg:max-w-[200px] ">
+                <BreadcrumbPage className=" hidden max-w-[120px] truncate font-commit-mono tracking-tight md:block lg:max-w-[200px] ">
                   <span className="flex items-center gap-1.5">
                     {item.icon && <item.icon size={16} aria-hidden="true" />}
 
@@ -80,7 +84,7 @@ export function NavBreadcrumb({ items }: NavBreadcrumbProps) {
                 >
                   <SelectTrigger
                     id="select-option"
-                    className="font-commit-mono text-foreground [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80"
+                    className="font-commit-mono text-foreground tracking-tight [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80"
                     aria-label="Select option"
                   >
                     <SelectValue placeholder="Select option" />
@@ -90,7 +94,7 @@ export function NavBreadcrumb({ items }: NavBreadcrumbProps) {
                       <SelectItem
                         key={i}
                         value={item.value}
-                        className="font-commit-mono"
+                        className="font-commit-mono tracking-tight"
                       >
                         <item.icon size={16} aria-hidden="true" />
                         {item.label}
diff --git a/apps/dashboard/src/components/nav/nav-help.tsx b/apps/dashboard/src/components/nav/nav-help.tsx
index f438aff51..d9212eaeb 100644
--- a/apps/dashboard/src/components/nav/nav-help.tsx
+++ b/apps/dashboard/src/components/nav/nav-help.tsx
@@ -36,7 +36,10 @@ export function NavHelp() {
           <SidebarMenuItem>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <SidebarMenuButton tooltip="Get Help">
+                <SidebarMenuButton
+                  className="font-commit-mono tracking-tight"
+                  tooltip="Get Help"
+                >
                   <HelpCircle />
                   <span>Get Help</span>
                 </SidebarMenuButton>
diff --git a/apps/dashboard/src/components/nav/nav-monitors.tsx b/apps/dashboard/src/components/nav/nav-monitors.tsx
index 679c86523..716ad37b0 100644
--- a/apps/dashboard/src/components/nav/nav-monitors.tsx
+++ b/apps/dashboard/src/components/nav/nav-monitors.tsx
@@ -162,7 +162,7 @@ export function NavMonitors() {
                   <Link
                     href={`/monitors/${item.id}/overview`}
                     onClick={() => setOpenMobile(false)}
-                    className="font-commit-mono"
+                    className="font-commit-mono tracking-tight"
                   >
                     <span>{item.name}</span>
                   </Link>
diff --git a/apps/dashboard/src/components/nav/nav-overview.tsx b/apps/dashboard/src/components/nav/nav-overview.tsx
index f298deafb..2e3dc157e 100644
--- a/apps/dashboard/src/components/nav/nav-overview.tsx
+++ b/apps/dashboard/src/components/nav/nav-overview.tsx
@@ -39,7 +39,7 @@ export function NavOverview({
               <Link
                 href={item.url}
                 onClick={() => setOpenMobile(false)}
-                className="font-commit-mono"
+                className="font-commit-mono tracking-tight"
               >
                 <item.icon />
                 <span>{item.name}</span>
diff --git a/apps/dashboard/src/components/nav/nav-status-pages.tsx b/apps/dashboard/src/components/nav/nav-status-pages.tsx
index 5dc498eb8..86a10d838 100644
--- a/apps/dashboard/src/components/nav/nav-status-pages.tsx
+++ b/apps/dashboard/src/components/nav/nav-status-pages.tsx
@@ -134,7 +134,7 @@ export function NavStatusPages() {
                   <Link
                     href={`/status-pages/${item.id}/status-reports`}
                     onClick={() => setOpenMobile(false)}
-                    className="font-commit-mono"
+                    className="font-commit-mono tracking-tight"
                   >
                     <span>{item.title}</span>
                   </Link>
diff --git a/apps/dashboard/src/components/nav/nav-user.tsx b/apps/dashboard/src/components/nav/nav-user.tsx
index 4d8d1f2bc..978fd8a89 100644
--- a/apps/dashboard/src/components/nav/nav-user.tsx
+++ b/apps/dashboard/src/components/nav/nav-user.tsx
@@ -70,7 +70,7 @@ export function NavUser() {
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-medium">{userName}</span>
-                <span className="truncate font-commit-mono text-xs">
+                <span className="truncate font-commit-mono text-xs tracking-tight">
                   {user?.email}
                 </span>
               </div>
@@ -96,7 +96,7 @@ export function NavUser() {
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-medium">{userName}</span>
-                  <span className="truncate font-commit-mono text-xs">
+                  <span className="truncate font-commit-mono text-xs tracking-tight">
                     {user?.email}
                   </span>
                 </div>
@@ -109,7 +109,7 @@ export function NavUser() {
                   <Link
                     href="/settings/billing"
                     onClick={() => setOpenMobile(false)}
-                    className="font-commit-mono"
+                    className="font-commit-mono tracking-tight"
                   >
                     <Sparkles />
                     Upgrade Workspace
@@ -118,7 +118,7 @@ export function NavUser() {
                 <DropdownMenuSeparator />
               </>
             ) : null}
-            <DropdownMenuGroup className="font-commit-mono">
+            <DropdownMenuGroup className="font-commit-mono tracking-tight">
               <DropdownMenuItem asChild>
                 <Link
                   href="/settings/account"
@@ -140,7 +140,7 @@ export function NavUser() {
                   Theme
                 </DropdownMenuSubTrigger>
                 <DropdownMenuPortal>
-                  <DropdownMenuSubContent className="font-commit-mono">
+                  <DropdownMenuSubContent className="font-commit-mono tracking-tight">
                     <DropdownMenuItem onClick={() => setTheme("light")}>
                       <Sun /> Light
                     </DropdownMenuItem>
@@ -166,7 +166,7 @@ export function NavUser() {
             <DropdownMenuSeparator />
             <DropdownMenuItem
               onClick={() => signOut()}
-              className="font-commit-mono"
+              className="font-commit-mono tracking-tight"
             >
               <LogOut />
               Log out
diff --git a/apps/dashboard/src/components/nav/workspace-switcher.tsx b/apps/dashboard/src/components/nav/workspace-switcher.tsx
index 92547c3c0..1c59dfb03 100644
--- a/apps/dashboard/src/components/nav/workspace-switcher.tsx
+++ b/apps/dashboard/src/components/nav/workspace-switcher.tsx
@@ -56,7 +56,9 @@ export function WorkspaceSwitcher() {
                   {workspace.name || "Untitled Workspace"}
                 </div>
                 <div className="truncate text-xs">
-                  <span className="font-commit-mono">{workspace.slug}</span>{" "}
+                  <span className="font-commit-mono tracking-tight">
+                    {workspace.slug}
+                  </span>{" "}
                   <span className="text-muted-foreground">
                     {workspace.plan === "team" ? "pro" : workspace.plan}
                   </span>
@@ -94,10 +96,8 @@ export function WorkspaceSwitcher() {
             <DropdownMenuSeparator />
             <DropdownMenuItem className="gap-2 p-2" asChild>
               <Link href="/settings/general">
-                <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
-                  <Plus className="size-4" />
-                </div>
-                <div className="font-medium text-muted-foreground">
+                <Plus />
+                <div className="font-commit-mono text-muted-foreground tracking-tight">
                   Add team member
                 </div>
               </Link>
diff --git a/apps/status-page/src/components/chart/chart-tooltip-number.tsx b/apps/status-page/src/components/chart/chart-tooltip-number.tsx
index 9c7d716f6..f73a93bfb 100644
--- a/apps/status-page/src/components/chart/chart-tooltip-number.tsx
+++ b/apps/status-page/src/components/chart/chart-tooltip-number.tsx
@@ -32,9 +32,9 @@ export function ChartTooltipNumber({
           ? labelFormatter(value, name)
           : chartConfig[name as keyof typeof chartConfig]?.label || name}
       </span>
-      <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
+      <div className="ml-auto flex items-baseline gap-0.5 font-medium font-mono text-foreground tabular-nums">
         {value}
-        <span className="text-muted-foreground font-normal">ms</span>
+        <span className="font-normal text-muted-foreground">ms</span>
       </div>
     </>
   );
diff --git a/apps/status-page/src/components/content/metric-card.tsx b/apps/status-page/src/components/content/metric-card.tsx
index 8eeb9c6db..916f7e11c 100644
--- a/apps/status-page/src/components/content/metric-card.tsx
+++ b/apps/status-page/src/components/content/metric-card.tsx
@@ -47,7 +47,7 @@ export function MetricCardTitle({
   ...props
 }: React.ComponentProps<"p">) {
   return (
-    <p className={cn("text-sm font-medium", className)} {...props}>
+    <p className={cn("font-medium text-sm", className)} {...props}>
       {children}
     </p>
   );
@@ -80,7 +80,7 @@ export function MetricCardValue({
   ...props
 }: React.ComponentProps<"p">) {
   return (
-    <p className={cn("text-foreground font-semibold", className)} {...props}>
+    <p className={cn("font-semibold text-foreground", className)} {...props}>
       {children}
     </p>
   );
@@ -94,7 +94,7 @@ export function MetricCardGroup({
   return (
     <div
       className={cn(
-        "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4",
+        "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
         className,
       )}
       {...props}
-- 
2.54.0