From 4270bf742a859c9e8e866b29e863186bc3cff3bd Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Wed, 26 Feb 2025 15:57:32 +0100
Subject: [PATCH] Alerting: Fix label overflow for history common labels
 (#101343)

---
 .../rules/state-history/LokiStateHistory.tsx   | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx b/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx
index 7e9a2caef07..76ba417dd20 100644
--- a/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx
+++ b/public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx
@@ -5,7 +5,7 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { DataFrame, GrafanaTheme2, TimeRange, dateTime } from '@grafana/data';
-import { Alert, Button, Field, Icon, Input, Label, Stack, Tooltip, useStyles2 } from '@grafana/ui';
+import { Alert, Button, Field, Icon, Input, Label, Stack, Text, Tooltip, useStyles2 } from '@grafana/ui';
 
 import { stateHistoryApi } from '../../../api/stateHistoryApi';
 import { combineMatcherStrings } from '../../../utils/alertmanager';
@@ -103,15 +103,15 @@ const LokiStateHistory = ({ ruleUID }: Props) => {
         <input type="submit" hidden />
       </form>
       {!isEmpty(commonLabels) && (
-        <div className={styles.commonLabels}>
-          <Stack gap={1} alignItems="center">
-            <strong>Common labels</strong>
+        <Stack gap={1} alignItems="center" wrap="wrap">
+          <Stack gap={0.5} alignItems="center" minWidth="fit-content">
+            <Text variant="bodySmall">Common labels</Text>
             <Tooltip content="Common labels are the ones attached to all of the alert instances">
-              <Icon name="info-circle" />
+              <Icon name="info-circle" size="sm" />
             </Tooltip>
-            <AlertLabels labels={fromPairs(commonLabels)} size="sm" />
           </Stack>
-        </div>
+          <AlertLabels labels={fromPairs(commonLabels)} size="sm" />
+        </Stack>
       )}
       {isEmpty(frameSubset) ? (
         <>
@@ -254,10 +254,6 @@ export const getStyles = (theme: GrafanaTheme2) => ({
     color: theme.colors.warning.text,
     padding: theme.spacing(),
   }),
-  commonLabels: css({
-    display: 'grid',
-    gridTemplateColumns: 'max-content auto',
-  }),
   // we need !important here to override the list item default styles
   highlightedLogRecord: css({
     background: `${theme.colors.primary.transparent} !important`,