From 7e36a4467c9017d3a82d58f40760c9a84de18a06 Mon Sep 17 00:00:00 2001
From: Thuan Vo <thuan.votann@gmail.com>
Date: Wed, 7 Aug 2024 21:28:42 -0700
Subject: [PATCH] fix: AA label should not overflow

---
 locales/en/common.json                       |  1 +
 src/app/Recordings/ActiveRecordingsTable.tsx |  9 +++++++-
 src/app/app.css                              | 24 +++++++++++++-------
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/locales/en/common.json b/locales/en/common.json
index 79373f6aba..e2a354a543 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -52,6 +52,7 @@
   "OK": "OK",
   "PRESERVED_ARCHIVES": "Preserved Archives",
   "PRODUCTION": "PRODUCTION",
+  "REFRESH": "Refresh",
   "REMOVE": "Remove",
   "RENAME": "Rename",
   "RESET": "Reset",
diff --git a/src/app/Recordings/ActiveRecordingsTable.tsx b/src/app/Recordings/ActiveRecordingsTable.tsx
index 798e8d8908..1c3d60e394 100644
--- a/src/app/Recordings/ActiveRecordingsTable.tsx
+++ b/src/app/Recordings/ActiveRecordingsTable.tsx
@@ -81,10 +81,12 @@ import {
   PanelHeader,
   PanelMain,
   PanelMainBody,
+  Tooltip,
 } from '@patternfly/react-core';
 import { EllipsisVIcon, RedoIcon } from '@patternfly/react-icons';
 import { ExpandableRowContent, SortByDirection, Tbody, Td, Tr } from '@patternfly/react-table';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { combineLatest, forkJoin, merge, Observable } from 'rxjs';
@@ -865,6 +867,7 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
   handleRowCheck,
   updateFilters,
 }) => {
+  const { t } = useTranslation();
   const [dayjs, datetimeContext] = useDayjs();
   const context = React.useContext(ServiceContext);
   const [loadingAnalysis, setLoadingAnalysis] = React.useState(false);
@@ -1033,7 +1036,11 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
                     size="sm"
                     isDisabled={loadingAnalysis}
                     onClick={handleLoadAnalysis}
-                    icon={<RedoIcon />}
+                    icon={
+                      <Tooltip content={t('REFRESH', { ns: 'common' })}>
+                        <RedoIcon />
+                      </Tooltip>
+                    }
                   />
                 </Title>
               </PanelHeader>
diff --git a/src/app/app.css b/src/app/app.css
index 35f540a1fb..57a238531e 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -118,10 +118,6 @@ html, body, #root {
   padding-left: 0.65em;
 }
 
-.automated-analysis-grid-item {
-  padding: 0.25em;
-}
-
 #automated-analysis-card {
   height: 100%;
 }
@@ -280,14 +276,18 @@ html, body, #root {
   color: var(--pf-v5-global--danger-color--100);
 }
 
-.automated-analysis-grid-item .pf-v5-c-label-group {
+.automated-analysis-grid-item {
+  padding: 0.25em;
+}
+
+.automated-analysis-grid-item .automated-analysis-topic-label-groups.pf-v5-c-label-group {
   width: 100%;
   height: 100%;
-  background-color: var(--pf-v5-global--BackgroundColor--light-300) !important;
+  background-color: var(--pf-v5-global--BackgroundColor--light-300);
 }
 
-:is(.pf-v5-theme-dark) .automated-analysis-grid-item .pf-v5-c-label-group {
-  background-color: var(--pf-v5-global--BackgroundColor--light-300) !important;
+:is(.pf-v5-theme-dark) .automated-analysis-grid-item .automated-analysis-topic-label-groups.pf-v5-c-label-group {
+  background-color: var(--pf-v5-global--BackgroundColor--light-300);
 }
 
 .automated-analysis-grid-item .pf-v5-c-label-group__main {
@@ -302,6 +302,14 @@ html, body, #root {
   text-overflow: ellipsis;
 }
 
+.automated-analysis-grid-item .pf-v5-c-label-group__list {
+  width: 100%;
+}
+
+.automated-analysis-grid-item .pf-v5-c-label-group__list-item {
+  width: 100%;
+}
+
 .stale-report-text {
   color: var(--pf-v5-global--warning-color--200);
   padding-right: 2em;