Alerting: Smaller fixes for long namespace / group names (#69095) (#69298)

(cherry picked from commit 7e924e0d74)

public/app/features/alerting/unified/RuleViewer.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useObservable, useToggle } from 'react-use';
 
 import { GrafanaTheme2, LoadingState, PanelData, RelativeTimeRange } from '@grafana/data';
+import { Stack } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
 import {
   Alert,
@@ -168,9 +169,9 @@ export function RuleViewer({ match }: RuleViewerProps) {
       {isProvisioned && <ProvisioningAlert resource={ProvisionedResource.AlertRule} />}
       <RuleViewerLayoutContent>
         <div>
-          <h4>
-            <Icon name="bell" size="lg" /> {rule.name}
-          </h4>
+          <Stack direction="row" alignItems="center" wrap={false} gap={1}>
+            <Icon name="bell" size="lg" /> <span className={styles.title}>{rule.name}</span>
+          </Stack>
           <RuleState rule={rule} isCreating={false} isDeleting={false} />
           <RuleDetailsActionButtons rule={rule} rulesSource={rulesSource} isViewMode={true} />
         </div>
@@ -291,6 +292,14 @@ const getStyles = (theme: GrafanaTheme2) => {
     queryWarning: css`
       margin: ${theme.spacing(4, 0)};
     `,
+    title: css`
+      font-size: ${theme.typography.h4.fontSize};
+      font-weight: ${theme.typography.fontWeightBold};
+
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    `,
     details: css`
       display: flex;
       flex-direction: row;
@@ -301,6 +310,10 @@ const getStyles = (theme: GrafanaTheme2) => {
     `,
     rightSide: css`
       padding-right: ${theme.spacing(3)};
+
+      max-width: 360px;
+      word-break: break-all;
+      overflow: hidden;
     `,
     rightSideDetails: css`
       & > div:first-child {

public/app/features/alerting/unified/components/rules/RulesGroup.tsx

@@ -287,9 +287,11 @@ export const getStyles = (theme: GrafanaTheme2) => ({
     align-items: center;
     padding: ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} 0;
     background-color: ${theme.colors.background.secondary};
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
   `,
   headerStats: css`
+    flex-shrink: 0;
+
     span {
       vertical-align: middle;
     }
@@ -303,6 +305,9 @@ export const getStyles = (theme: GrafanaTheme2) => ({
   heading: css`
     margin-left: ${theme.spacing(1)};
     margin-bottom: 0;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
   `,
   spacer: css`
     flex: 1;
@@ -332,6 +337,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
   actionIcons: css`
     width: 80px;
     align-items: center;
+    flex-shrink: 0;
   `,
   rulesTable: css`
     margin-top: ${theme.spacing(3)};