fix: summary bar overlay fix for plugin (#1710)

Signed-off-by: veds-g <[email protected]>
numaproj · May 3, 2024 · c9fc458 · c9fc458
1 parent 120244a
commit c9fc458
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 13 deletions.
diff --git a/ui/src/App.css b/ui/src/App.css
@@ -4,10 +4,6 @@ html {
 }
 body,
 #root,
-.MuiScopedCssBaseline-root {
-  height: 100%;
-  font-family: Avenir !important;
-}
 
 .App-side-nav-link {
   text-decoration: none;

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -262,7 +262,9 @@ function App(props: AppProps) {
           setUserInfo,
         }}
       >
-        <ScopedCssBaseline>
+        <ScopedCssBaseline
+          sx={{ height: "100%", fontFamily: "Avenir, sans-serif" }}
+        >
           <Box
             sx={{
               display: "flex",

diff --git a/ui/src/components/common/SummaryPageLayout/index.tsx b/ui/src/components/common/SummaryPageLayout/index.tsx
@@ -250,7 +250,7 @@ export function SummaryPageLayout({
             width: "14.4rem",
             background: "#F8F8FB",
             boxShadow: "0 0.4rem 0.6rem rgba(39, 76, 119, 0.16)",
-            zIndex: (theme) => theme.zIndex.drawer - 1,
+            zIndex: isPlugin ? "auto" : (theme) => theme.zIndex.drawer - 1,
             position: isPlugin ? "relative" : "fixed",
             top: isPlugin ? "3.85rem" : "10.2rem",
             padding: "0 2rem",
@@ -281,7 +281,7 @@ export function SummaryPageLayout({
           minHeight: SUMMARY_HEIGHT,
           background: "#F8F8FB",
           boxShadow: "0 0.3rem 1.1rem rgba(39, 76, 119, 0.16)",
-          zIndex: (theme) => theme.zIndex.drawer - 1,
+          zIndex: isPlugin ? "auto" : (theme) => theme.zIndex.drawer - 1,
           position: isPlugin ? "relative" : "fixed",
           top: isPlugin ? "10.5rem" : "9.2rem",
         }}

diff --git a/ui/src/components/plugin/NumaflowMonitorApp/App.css b/ui/src/components/plugin/NumaflowMonitorApp/App.css
@@ -1,10 +1,6 @@
 html,
 body,
 #root,
-.MuiScopedCssBaseline-root {
-    height: 100%;
-    font-family: Avenir !important;
-}
 
 .App-side-nav-link {
     text-decoration: none;

diff --git a/ui/src/components/plugin/NumaflowMonitorApp/App.tsx b/ui/src/components/plugin/NumaflowMonitorApp/App.tsx
@@ -193,7 +193,9 @@ function App(props: AppProps) {
           setUserInfo,
         }}
       >
-        <ScopedCssBaseline>
+        <ScopedCssBaseline
+          sx={{ height: "100%", fontFamily: "Avenir, sans-serif" }}
+        >
           <Box
             sx={{
               display: "flex",
@@ -209,7 +211,7 @@ function App(props: AppProps) {
                 width: "100%",
                 overflow: "auto",
                 background: "#F8F8FB",
-                zIndex: (theme) => theme.zIndex.drawer - 1,
+                zIndex: "auto",
               }}
             >
               <Breadcrumbs namespace={namespace} />