From 7e0cba568e8412c0b0a52868195b39299bd122c2 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Mon, 9 Sep 2024 11:47:03 +0200
Subject: [PATCH] Make annotations display on /alerts page consistent with
 /rules

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 web/ui/mantine-ui/src/components/RuleDefinition.tsx |  1 +
 web/ui/mantine-ui/src/pages/AlertsPage.tsx          | 12 ++++--------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/web/ui/mantine-ui/src/components/RuleDefinition.tsx b/web/ui/mantine-ui/src/components/RuleDefinition.tsx
index 4e22dd934..10944f6e7 100644
--- a/web/ui/mantine-ui/src/components/RuleDefinition.tsx
+++ b/web/ui/mantine-ui/src/components/RuleDefinition.tsx
@@ -5,6 +5,7 @@ import {
   Card,
   Group,
   rem,
+  Table,
   Tooltip,
   useComputedColorScheme,
 } from "@mantine/core";
diff --git a/web/ui/mantine-ui/src/pages/AlertsPage.tsx b/web/ui/mantine-ui/src/pages/AlertsPage.tsx
index e96008306..852236f86 100644
--- a/web/ui/mantine-ui/src/pages/AlertsPage.tsx
+++ b/web/ui/mantine-ui/src/pages/AlertsPage.tsx
@@ -376,19 +376,15 @@ export default function AlertsPage() {
                                       {showAnnotations && (
                                         <Table.Tr>
                                           <Table.Td colSpan={4}>
-                                            <Table
-                                              mt="md"
-                                              mb="xl"
-                                              withTableBorder
-                                              withColumnBorders
-                                              bg="var(--mantine-color-body)"
-                                            >
+                                            <Table mt="md" mb="xl">
                                               <Table.Tbody>
                                                 {Object.entries(
                                                   a.annotations
                                                 ).map(([k, v]) => (
                                                   <Table.Tr key={k}>
-                                                    <Table.Th>{k}</Table.Th>
+                                                    <Table.Th c="light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-4))">
+                                                      {k}
+                                                    </Table.Th>
                                                     <Table.Td>{v}</Table.Td>
                                                   </Table.Tr>
                                                 ))}