Fixed disabled and cycled scrollbar on Connector Set Up page (#14531)

airbytehq · Jul 8, 2022 · addf57c · addf57c
1 parent d2ea574
commit addf57c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 28 deletions.
diff --git a/...src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.module.scss b/...src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.module.scss
@@ -7,37 +7,34 @@
 }
 
 .darkOverlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: absolute;
   top: 0;
   left: 0;
-  height: 100%;
-  width: 100%;
+  bottom: 0;
+  right: 0;
   z-index: 10;
-  background-color: #1a194d;
   opacity: 0.9;
-  color: white;
+  background-color: colors.$dark-blue-900;
+  color: colors.$white;
   text-align: center;
-  vertical-align: middle;
-  padding: 400px 30px 30px 30px;
-}
-
-.container > *:last-child {
-  padding-bottom: variables.$spacing-page-bottom;
 }
 
-.noScroll {
-  overflow: hidden;
-  max-height: 100%;
-}
-
-.fullHeight {
+.container {
+  overflow-x: auto;
   height: 100%;
+
+  & > *:last-child {
+    padding-bottom: variables.$spacing-page-bottom;
+  }
 }
 
 .lightOverlay {
   height: 100%;
   width: 100%;
-  background-color: #ffffff;
+  background-color: colors.$white;
   text-align: center;
   vertical-align: middle;
   overflow: hidden;

diff --git a/...-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx b/...-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx
@@ -23,23 +23,16 @@ const LeftPanelContainer: React.FC<React.PropsWithChildren<PanelContainerProps>>
   const screenWidth = useWindowSize().width;
 
   return (
-    <>
-      {screenWidth > 500 && width < 450 && (
+    <div className={classNames(styles.container)}>
+      {screenWidth > 500 && width < 550 && (
         <div className={styles.darkOverlay}>
           <h3>
             <FormattedMessage id="connectorForm.expandForm" />
           </h3>
         </div>
       )}
-      <div
-        className={classNames(styles.container, {
-          [styles.noScroll]: width < 550,
-          [styles.fullHeight]: width > 550,
-        })}
-      >
-        {children}
-      </div>
-    </>
+      <div>{children}</div>
+    </div>
   );
 };