From 93dd49c8759583793ec44c06e4e0976fc4bf5b23 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 18 Dec 2025 12:41:43 -0800
Subject: [PATCH 1/4] fix breadcrumb

---
 client/src/components/design-elements/Breadcrumb.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/components/design-elements/Breadcrumb.tsx b/client/src/components/design-elements/Breadcrumb.tsx
index 91e84af08..326b60c33 100644
--- a/client/src/components/design-elements/Breadcrumb.tsx
+++ b/client/src/components/design-elements/Breadcrumb.tsx
@@ -65,13 +65,15 @@ export const Breadcrumb = ({
         const last = index === pathnames.length - 1;
         const to = `/${pathnames.slice(0, index + 1).join("/")}`;
 
-        let displayName =
-          t(`common.breadcrumbs.${value}`) ||
-          value.charAt(0).toUpperCase() + value.slice(1);
+        let displayName = "";
 
         // Paths that are IDs should be detail pages
         if (value.length === 24 || value.match(/^[a-f0-9-]{36}$/)) {
           displayName = "Details";
+        } else {
+          displayName =
+            t(`common.breadcrumbs.${value}`) ||
+            value.charAt(0).toUpperCase() + value.slice(1);
         }
 
         return last ? (

From 40977775f09f6add90007694688a3964a06bcc63 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 18 Dec 2025 12:45:34 -0800
Subject: [PATCH 2/4] fix conditional rendering

---
 client/src/components/monitors/HistogramStatus.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/monitors/HistogramStatus.tsx b/client/src/components/monitors/HistogramStatus.tsx
index ec131ad0e..f45b7f7ff 100644
--- a/client/src/components/monitors/HistogramStatus.tsx
+++ b/client/src/components/monitors/HistogramStatus.tsx
@@ -82,13 +82,13 @@ export const HistogramStatus = ({
   const normalChecks = normalizeResponseTimes(checks, "avgResponseTime");
 
   const CustomTooltip = ({ active, payload }: any) => {
+    const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
     if (!active || !payload?.length) return null;
     const d = payload[0]?.payload as GroupedCheck & {
       avgResponseTime?: number;
     };
     const avg = d?.avgResponseTime ?? 0;
     const titleText = t("common.charts.uptime.avgResponseTime");
-    const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
     const fmt = range === "30d" ? "MMM D, YYYY" : "ddd, MMM D, YYYY, h:mm A";
     let dateLabel = "";
     if (d?._id) {

From 6f41167456b717b865d5152b92855242d7d2446e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 18 Dec 2025 12:53:16 -0800
Subject: [PATCH 3/4] missing x axis

---
 client/src/components/monitors/HistogramPageSpeedScores.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/components/monitors/HistogramPageSpeedScores.tsx b/client/src/components/monitors/HistogramPageSpeedScores.tsx
index 1c8cb47ca..6bc5ca19b 100644
--- a/client/src/components/monitors/HistogramPageSpeedScores.tsx
+++ b/client/src/components/monitors/HistogramPageSpeedScores.tsx
@@ -1,6 +1,7 @@
 import { BaseChart } from "@/components/monitors/Chart";
 import { TrendingUp } from "lucide-react";
 import {
+  XAxis,
   AreaChart,
   Area,
   Tooltip,
@@ -59,6 +60,7 @@ export const HistogramPageSpeedScores = ({
     >
       <ResponsiveContainer width="100%" minWidth={25} height={215}>
         <AreaChart data={checks}>
+          <XAxis dataKey={"_id"} />
           <CartesianGrid
             stroke={theme.palette.divider}
             strokeWidth={1}

From 88dc2f409649a1cc4d50ba23bdbc1bc2676cc064 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 18 Dec 2025 12:57:05 -0800
Subject: [PATCH 4/4] format x-axis

---
 .../src/components/monitors/HistogramPageSpeedScores.tsx  | 8 +++++++-
 client/src/pages/pagespeed/PageSpeedDetails.tsx           | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/components/monitors/HistogramPageSpeedScores.tsx b/client/src/components/monitors/HistogramPageSpeedScores.tsx
index 6bc5ca19b..8e8d410de 100644
--- a/client/src/components/monitors/HistogramPageSpeedScores.tsx
+++ b/client/src/components/monitors/HistogramPageSpeedScores.tsx
@@ -1,5 +1,6 @@
 import { BaseChart } from "@/components/monitors/Chart";
 import { TrendingUp } from "lucide-react";
+import { XTick } from "./ChartResponseTime";
 import {
   XAxis,
   AreaChart,
@@ -49,8 +50,10 @@ const config: Record<string, ConfigItem> = {
 
 export const HistogramPageSpeedScores = ({
   checks,
+  range,
 }: {
   checks: GroupedCheck[];
+  range: string;
 }) => {
   const theme = useTheme();
   return (
@@ -60,7 +63,10 @@ export const HistogramPageSpeedScores = ({
     >
       <ResponsiveContainer width="100%" minWidth={25} height={215}>
         <AreaChart data={checks}>
-          <XAxis dataKey={"_id"} />
+          <XAxis
+            dataKey={"_id"}
+            tick={(props) => <XTick {...props} range={range} />}
+          />
           <CartesianGrid
             stroke={theme.palette.divider}
             strokeWidth={1}
diff --git a/client/src/pages/pagespeed/PageSpeedDetails.tsx b/client/src/pages/pagespeed/PageSpeedDetails.tsx
index ca2bb1409..8f79c3ef0 100644
--- a/client/src/pages/pagespeed/PageSpeedDetails.tsx
+++ b/client/src/pages/pagespeed/PageSpeedDetails.tsx
@@ -87,7 +87,7 @@ const PageSpeedDetailsPage = () => {
         />
       </Stack>
       <HeaderRange loading={isValidating} range={range} setRange={setRange} />
-      <HistogramPageSpeedScores checks={checks} />
+      <HistogramPageSpeedScores checks={checks} range={range} />
       <Stack direction={isSmall ? "column" : "row"} gap={theme.spacing(10)}>
         <ChartPageSpeedReport latestCheck={checks?.[0]} />
         <ChartPageSpeedReportLegend latestCheck={checks?.[0]} />