From 21907eba1963a990b190635fc245ed0a01f971ba Mon Sep 17 00:00:00 2001
From: Ashley McEntee <123661468+ashley-o0o@users.noreply.github.com>
Date: Thu, 31 Oct 2024 13:21:22 -0400
Subject: [PATCH] Fix popover overflow (#3395)

* Fix popover overflow

Update to add headers

* Add popover clustom class
---
 frontend/src/app/App.scss                      |  5 +++++
 .../screens/global/InferenceServiceStatus.tsx  | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/frontend/src/app/App.scss b/frontend/src/app/App.scss
index 3ed7f0724c..7e305a80a1 100644
--- a/frontend/src/app/App.scss
+++ b/frontend/src/app/App.scss
@@ -89,3 +89,8 @@ body,
     max-width: 100%;
   }
 }
+
+.pf-v5-c-popover.odh-u-scrollable .pf-v5-c-popover__body {
+  max-height: 65vh;
+  overflow: auto;
+}
diff --git a/frontend/src/pages/modelServing/screens/global/InferenceServiceStatus.tsx b/frontend/src/pages/modelServing/screens/global/InferenceServiceStatus.tsx
index baba4b00d6..a7edf9673b 100644
--- a/frontend/src/pages/modelServing/screens/global/InferenceServiceStatus.tsx
+++ b/frontend/src/pages/modelServing/screens/global/InferenceServiceStatus.tsx
@@ -101,6 +101,22 @@ const InferenceServiceStatus: React.FC<InferenceServiceStatusProps> = ({
     }
   };
 
+  const headerContent = () => {
+    switch (state) {
+      case InferenceServiceModelState.LOADED:
+        return 'Available';
+      case InferenceServiceModelState.FAILED_TO_LOAD:
+        return 'Failed';
+      case InferenceServiceModelState.PENDING:
+      case InferenceServiceModelState.LOADING:
+        return 'In Progress';
+      case InferenceServiceModelState.UNKNOWN:
+        return 'Status Unknown';
+      default:
+        return 'Inference Service Status';
+    }
+  };
+
   const bodyContent = modelStatus?.failedToSchedule
     ? 'Insufficient resources'
     : getInferenceServiceStatusMessage(inferenceService);
@@ -108,7 +124,9 @@ const InferenceServiceStatus: React.FC<InferenceServiceStatusProps> = ({
   return (
     <Popover
       data-testid="model-status-tooltip"
+      className="odh-u-scrollable"
       position="top"
+      headerContent={headerContent()}
       bodyContent={bodyContent}
       isVisible={bodyContent ? undefined : false}
     >