From d6589e807b82a1e100a5b32c80f53bd873edc262 Mon Sep 17 00:00:00 2001
From: Alan Buscaglia <gentlemanprogramming@gmail.com>
Date: Wed, 22 Oct 2025 10:21:33 +0200
Subject: [PATCH] style: format alert-pill component

---
 ui/components/graphs/line-chart.tsx           |  5 +---
 ui/components/graphs/shared/alert-pill.tsx    |  5 +++-
 ui/components/graphs/shared/chart-tooltip.tsx | 30 +++++++++++++------
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/ui/components/graphs/line-chart.tsx b/ui/components/graphs/line-chart.tsx
index 7ab92b4ddf..daefb55808 100644
--- a/ui/components/graphs/line-chart.tsx
+++ b/ui/components/graphs/line-chart.tsx
@@ -87,10 +87,7 @@ const CustomLineTooltip = ({
               </div>
               {newFindings !== undefined && (
                 <div className="flex items-center gap-2">
-                  <Bell
-                    size={14}
-                    style={{ color: "var(--chart-fail)" }}
-                  />
+                  <Bell size={14} style={{ color: "var(--chart-fail)" }} />
                   <span
                     className="text-xs"
                     style={{ color: "var(--chart-text-secondary)" }}
diff --git a/ui/components/graphs/shared/alert-pill.tsx b/ui/components/graphs/shared/alert-pill.tsx
index 8fcba831e6..2da8b1903f 100644
--- a/ui/components/graphs/shared/alert-pill.tsx
+++ b/ui/components/graphs/shared/alert-pill.tsx
@@ -21,7 +21,10 @@ export function AlertPill({
         className="flex items-center gap-1 rounded-full px-2 py-1"
         style={{ backgroundColor: "var(--chart-alert-bg)" }}
       >
-        <AlertTriangle size={iconSize} style={{ color: "var(--chart-alert-text)" }} />
+        <AlertTriangle
+          size={iconSize}
+          style={{ color: "var(--chart-alert-text)" }}
+        />
         <span
           className={cn(`text-${textSize}`, "font-semibold")}
           style={{ color: "var(--chart-alert-text)" }}
diff --git a/ui/components/graphs/shared/chart-tooltip.tsx b/ui/components/graphs/shared/chart-tooltip.tsx
index 95af794d89..432a15713d 100644
--- a/ui/components/graphs/shared/chart-tooltip.tsx
+++ b/ui/components/graphs/shared/chart-tooltip.tsx
@@ -53,10 +53,7 @@ export function ChartTooltip({
         </p>
       </div>
 
-      <p
-        className="mt-1 text-xs"
-        style={{ color: CHART_COLORS.textPrimary }}
-      >
+      <p className="mt-1 text-xs" style={{ color: CHART_COLORS.textPrimary }}>
         {typeof data.value === "number"
           ? data.value.toLocaleString()
           : data.value}
@@ -66,7 +63,10 @@ export function ChartTooltip({
       {data.newFindings !== undefined && data.newFindings > 0 && (
         <div className="mt-1 flex items-center gap-2">
           <Bell size={14} style={{ color: "var(--chart-fail)" }} />
-          <span className="text-xs" style={{ color: CHART_COLORS.textSecondary }}>
+          <span
+            className="text-xs"
+            style={{ color: CHART_COLORS.textSecondary }}
+          >
             {data.newFindings} New Findings
           </span>
         </div>
@@ -75,7 +75,10 @@ export function ChartTooltip({
       {data.new !== undefined && data.new > 0 && (
         <div className="mt-1 flex items-center gap-2">
           <Bell size={14} style={{ color: "var(--chart-fail)" }} />
-          <span className="text-xs" style={{ color: CHART_COLORS.textSecondary }}>
+          <span
+            className="text-xs"
+            style={{ color: CHART_COLORS.textSecondary }}
+          >
             {data.new} New
           </span>
         </div>
@@ -84,14 +87,20 @@ export function ChartTooltip({
       {data.muted !== undefined && data.muted > 0 && (
         <div className="mt-1 flex items-center gap-2">
           <VolumeX size={14} style={{ color: CHART_COLORS.textSecondary }} />
-          <span className="text-xs" style={{ color: CHART_COLORS.textSecondary }}>
+          <span
+            className="text-xs"
+            style={{ color: CHART_COLORS.textSecondary }}
+          >
             {data.muted} Muted
           </span>
         </div>
       )}
 
       {data.change !== undefined && (
-        <p className="mt-1 text-xs" style={{ color: CHART_COLORS.textSecondary }}>
+        <p
+          className="mt-1 text-xs"
+          style={{ color: CHART_COLORS.textSecondary }}
+        >
           <span className="font-bold">
             {data.change > 0 ? "+" : ""}
             {data.change}%
@@ -146,7 +155,10 @@ export function MultiSeriesChartTooltip({
             {entry.value}
           </span>
           {entry.payload[`${entry.dataKey}_change`] && (
-            <span className="text-xs" style={{ color: CHART_COLORS.textSecondary }}>
+            <span
+              className="text-xs"
+              style={{ color: CHART_COLORS.textSecondary }}
+            >
               ({entry.payload[`${entry.dataKey}_change`] > 0 ? "+" : ""}
               {entry.payload[`${entry.dataKey}_change`]}%)
             </span>