Fixed documentation panel width resets after resizing browser window (#15454)

* Fixed documentation panel width resets after resizing browser window

Author: m19berger

airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.module.scss

@@ -1,11 +1,11 @@
 @use "../../scss/colors";
 
 .container {
-  padding: 0px 0px 20px;
-  background-color: colors.$white;
   min-height: 100vh;
+  padding-bottom: 40px;
+  background-color: colors.$white;
 }
 
 .content {
-  padding: 0px 35px 20px;
+  padding: 0 35px;
 }

airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.module.scss

@@ -0,0 +1,29 @@
+$banner-height: 30px;
+
+.mainContainer {
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  min-height: 680px;
+
+  .content {
+    overflow-y: auto;
+    width: 100%;
+    height: 100%;
+
+    .dataBlock {
+      width: 100%;
+      height: 100%;
+    }
+
+    &.alertBanner {
+      margin-top: $banner-height;
+
+      .dataBlock {
+        height: calc(100% - #{$banner-height});
+      }
+    }
+  }
+}

airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx

@@ -1,7 +1,7 @@
+import classNames from "classnames";
 import React, { useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Link, Outlet } from "react-router-dom";
-import styled from "styled-components";
 
 import { LoadingPage } from "components";
 import { AlertBanner } from "components/base/Banner/AlertBanner";
@@ -15,27 +15,7 @@ import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundError
 import { StartOverErrorView } from "views/common/StartOverErrorView";
 
 import { InsufficientPermissionsErrorBoundary } from "./InsufficientPermissionsErrorBoundary";
-
-const MainContainer = styled.div`
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-  min-height: 680px;
-`;
-
-const Content = styled.div`
-  overflow-y: auto;
-  width: 100%;
-  height: 100%;
-`;
-
-const DataBlock = styled.div<{ hasBanner?: boolean }>`
-  width: 100%;
-  height: 100%;
-  padding-top: ${({ hasBanner }) => (hasBanner ? 30 : 0)}px;
-`;
+import styles from "./MainView.module.scss";
 
 const MainView: React.FC = (props) => {
   const { formatMessage } = useIntl();
@@ -79,19 +59,19 @@ const MainView: React.FC = (props) => {
   }, [alertToShow, cloudWorkspace, formatMessage]);
 
   return (
-    <MainContainer>
+    <div className={styles.mainContainer}>
       <InsufficientPermissionsErrorBoundary errorComponent={<StartOverErrorView />}>
         <SideBar />
-        <Content>
+        <div className={classNames(styles.content, { [styles.alertBanner]: !!alertToShow })}>
           {alertToShow && <AlertBanner message={alertMessage} />}
-          <DataBlock hasBanner={!!alertToShow}>
+          <div className={styles.dataBlock}>
             <ResourceNotFoundErrorBoundary errorComponent={<StartOverErrorView />}>
               <React.Suspense fallback={<LoadingPage />}>{props.children ?? <Outlet />}</React.Suspense>
             </ResourceNotFoundErrorBoundary>
-          </DataBlock>
-        </Content>
+          </div>
+        </div>
       </InsufficientPermissionsErrorBoundary>
-    </MainContainer>
+    </div>
   );
 };
 

airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx

@@ -58,7 +58,7 @@ export const ConnectorDocumentationLayout: React.FC = ({ children }) => {
   const screenWidth = useWindowSize().width;
 
   return (
-    <ReflexContainer orientation="vertical" windowResizeAware>
+    <ReflexContainer orientation="vertical">
       <ReflexElement className={classNames("left-pane", styles.leftPanelStyle)} propagateDimensions minSize={150}>
         <LeftPanelContainer>{children}</LeftPanelContainer>
       </ReflexElement>