From d0ccbd2eb5a505791a5017a30a0f8d1cb3c55fd7 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Tue, 3 Sep 2024 16:09:50 +0200
Subject: [PATCH] Top-align all targets page table cell contents, other styling

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 .../src/pages/targets/ScrapePoolsList.tsx     | 19 +++++++++++++------
 .../src/pages/targets/TargetLabels.tsx        |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx b/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx
index 1e399b8a18..290543fc5b 100644
--- a/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx
+++ b/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx
@@ -325,7 +325,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
                                     : undefined,
                                 }}
                               >
-                                <Table.Td>
+                                <Table.Td valign="top">
                                   {/* TODO: Process target URL like in old UI */}
                                   <EndpointLink
                                     endpoint={target.scrapeUrl}
@@ -333,19 +333,24 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
                                   />
                                 </Table.Td>
 
-                                <Table.Td>
+                                <Table.Td valign="top">
                                   <TargetLabels
                                     labels={target.labels}
                                     discoveredLabels={target.discoveredLabels}
                                   />
                                 </Table.Td>
-                                <Table.Td>
-                                  <Group gap="xs" wrap="wrap">
+                                <Table.Td valign="top">
+                                  <Group
+                                    gap="xs"
+                                    wrap="wrap"
+                                    justify="space-between"
+                                  >
                                     <Tooltip
                                       label="Last target scrape"
                                       withArrow
                                     >
                                       <Badge
+                                        w="max-content"
                                         variant="light"
                                         className={badgeClasses.statsBadge}
                                         styles={{
@@ -365,6 +370,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
                                       withArrow
                                     >
                                       <Badge
+                                        w="max-content"
                                         variant="light"
                                         className={badgeClasses.statsBadge}
                                         styles={{
@@ -381,8 +387,9 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
                                     </Tooltip>
                                   </Group>
                                 </Table.Td>
-                                <Table.Td>
+                                <Table.Td valign="top">
                                   <Badge
+                                    w="max-content"
                                     className={healthBadgeClass(target.health)}
                                   >
                                     {target.health}
@@ -391,7 +398,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
                               </Table.Tr>
                               {target.lastError && (
                                 <Table.Tr>
-                                  <Table.Td colSpan={5}>
+                                  <Table.Td colSpan={5} valign="top">
                                     <Alert
                                       color="red"
                                       mb="sm"
diff --git a/web/ui/mantine-ui/src/pages/targets/TargetLabels.tsx b/web/ui/mantine-ui/src/pages/targets/TargetLabels.tsx
index 54e944f8cf..ae92ba2eaf 100644
--- a/web/ui/mantine-ui/src/pages/targets/TargetLabels.tsx
+++ b/web/ui/mantine-ui/src/pages/targets/TargetLabels.tsx
@@ -14,7 +14,7 @@ const TargetLabels: FC<TargetLabelsProps> = ({ discoveredLabels, labels }) => {
   const [showDiscovered, { toggle: toggleDiscovered }] = useDisclosure(false);
 
   return (
-    <Stack my={showDiscovered ? "sm" : undefined}>
+    <Stack>
       <Group wrap="nowrap" align="flex-start">
         <LabelBadges labels={labels} />