From addf57cc8312978e852a4fc6ce84795f3ddfb05a Mon Sep 17 00:00:00 2001
From: Mark Berger <m19.berger@gmail.com>
Date: Fri, 8 Jul 2022 19:55:32 +0300
Subject: [PATCH] Fixed disabled and cycled scrollbar on Connector Set Up page
 (#14531)

---
 .../ConnectorDocumentationLayout.module.scss  | 31 +++++++++----------
 .../ConnectorDocumentationLayout.tsx          | 15 +++------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.module.scss b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.module.scss
index edf62f045bbe..133a84056ee1 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.module.scss
+++ b/airbyte-webapp/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/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx
index d4ca7803ed9d..3595bc354543 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx
+++ b/airbyte-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>
   );
 };