Fix popover overflow (opendatahub-io#3395)

* Fix popover overflow Update to add headers * Add popover clustom class
DaoDaoNoCode · Oct 31, 2024 · 21907eb · 21907eb
1 parent 591f87b
commit 21907eb
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git 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
@@ -101,14 +101,32 @@ 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);
 
   return (
     <Popover
       data-testid="model-status-tooltip"
+      className="odh-u-scrollable"
       position="top"
+      headerContent={headerContent()}
       bodyContent={bodyContent}
       isVisible={bodyContent ? undefined : false}
     >