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

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>
@@ -295,6 +296,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;
@@ -305,6 +314,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

@@ -286,13 +286,15 @@ export const getStyles = (theme: GrafanaTheme2) => {
       flex-direction: row;
       align-items: center;
       padding: ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} 0;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
       border-bottom: 1px solid ${theme.colors.border.weak};
       &:hover {
         background-color: ${theme.components.table.rowHoverBackground};
       }
     `,
     headerStats: css`
+      flex-shrink: 0;
+
       span {
         vertical-align: middle;
       }
@@ -307,6 +309,10 @@ export const getStyles = (theme: GrafanaTheme2) => {
       margin-left: ${theme.spacing(1)};
       margin-bottom: 0;
       cursor: pointer;
+
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     `,
     spacer: css`
       flex: 1;
@@ -336,6 +342,8 @@ export const getStyles = (theme: GrafanaTheme2) => {
     actionIcons: css`
       width: 80px;
       align-items: center;
+
+      flex-shrink: 0;
     `,
     rulesTable: css`
       margin: ${theme.spacing(2, 0)};