fix: add material-ui class name seed (#721)

* chore: add material-ui class name seed Signed-off-by: Carina Ursu <carina@union.ai> * fix: overflow of modal Signed-off-by: James <james@union.ai> --------- Signed-off-by: Carina Ursu <carina@union.ai> Signed-off-by: James <james@union.ai> Co-authored-by: James <james@union.ai>
flyteorg · Mar 14, 2023 · a8ee3b2 · a8ee3b2
1 parent be0e533
commit a8ee3b2
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 28 deletions.
diff --git a/packages/components/src/AppInfo/index.tsx b/packages/components/src/AppInfo/index.tsx
@@ -31,6 +31,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
+    overflowY: 'initial',
   },
   dialog: {
     width: `${INFO_WINDOW_WIDTH}px`,

diff --git a/packages/console/src/components/App/App.tsx b/packages/console/src/components/App/App.tsx
@@ -1,6 +1,11 @@
 import 'intersection-observer';
 import * as React from 'react';
-import { CssBaseline, Collapse } from '@material-ui/core';
+import {
+  CssBaseline,
+  Collapse,
+  StylesProvider,
+  createGenerateClassName,
+} from '@material-ui/core';
 import { ThemeProvider } from '@material-ui/styles';
 import { FlyteApiProvider } from '@flyteorg/flyte-api';
 import { SnackbarProvider } from 'notistack';
@@ -57,34 +62,40 @@ export const AppComponent: React.FC<AppComponentProps> = (
     <FeatureFlagsProvider>
       <LocalCacheProvider>
         <ThemeProvider theme={getMuiTheme(props.config)}>
-          <SnackbarProvider
-            // Notifications provider https://iamhosseindhv.com/notistack/demos
-            maxSnack={2}
-            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-            TransitionComponent={Collapse}
+          <StylesProvider
+            generateClassName={createGenerateClassName({
+              seed: 'c-',
+            })}
           >
-            <QueryClientProvider client={queryClient}>
-              <FlyteApiProvider flyteApiDomain={env.ADMIN_API_URL}>
-                <APIContext.Provider value={apiState}>
-                  <QueryAuthorizationObserver />
-                  <SkeletonTheme
-                    color={skeletonColor}
-                    highlightColor={skeletonHighlightColor}
-                  >
-                    <CssBaseline />
-                    <Router history={history}>
-                      <ErrorBoundary fixed={true}>
-                        <NavBarRouter registry={props?.registry} />
-                        <ApplicationRouter />
-                      </ErrorBoundary>
-                    </Router>
-                    <SystemStatusBanner />
-                  </SkeletonTheme>
-                </APIContext.Provider>
-              </FlyteApiProvider>
-              <ReactQueryDevtools initialIsOpen={false} />
-            </QueryClientProvider>
-          </SnackbarProvider>
+            <SnackbarProvider
+              // Notifications provider https://iamhosseindhv.com/notistack/demos
+              maxSnack={2}
+              anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+              TransitionComponent={Collapse}
+            >
+              <QueryClientProvider client={queryClient}>
+                <FlyteApiProvider flyteApiDomain={env.ADMIN_API_URL}>
+                  <APIContext.Provider value={apiState}>
+                    <QueryAuthorizationObserver />
+                    <SkeletonTheme
+                      color={skeletonColor}
+                      highlightColor={skeletonHighlightColor}
+                    >
+                      <CssBaseline />
+                      <Router history={history}>
+                        <ErrorBoundary fixed={true}>
+                          <NavBarRouter registry={props?.registry} />
+                          <ApplicationRouter />
+                        </ErrorBoundary>
+                      </Router>
+                      <SystemStatusBanner />
+                    </SkeletonTheme>
+                  </APIContext.Provider>
+                </FlyteApiProvider>
+                <ReactQueryDevtools initialIsOpen={false} />
+              </QueryClientProvider>
+            </SnackbarProvider>
+          </StylesProvider>
         </ThemeProvider>
       </LocalCacheProvider>
     </FeatureFlagsProvider>