fix width of create connection view on onboarding page (airbytehq#16683)

jhammarstedt · Oct 31, 2022 · 566f4df · 566f4df
1 parent e171401
commit 566f4df
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.module.scss b/airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.module.scss
@@ -2,3 +2,8 @@
   margin: 0 10px -1px 0;
   font-size: 14px;
 }
+
+.connectionFormContainer {
+  width: 100%;
+  padding: 0 20px;
+}
diff --git a/airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx b/airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx
@@ -101,18 +101,20 @@ const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
     <LoadingSchema />
   ) : (
     <Suspense fallback={<LoadingSchema />}>
-      <ConnectionForm
-        mode="create"
-        connection={connection}
-        onDropDownSelect={onSelectFrequency}
-        onSubmit={onSubmitConnectionStep}
-        additionalSchemaControl={
-          <Button onClick={onDiscoverSchema} type="button">
-            <FontAwesomeIcon className={styles.tryArrowIcon} icon={faRedoAlt} />
-            <FormattedMessage id="connection.refreshSchema" />
-          </Button>
-        }
-      />
+      <div className={styles.connectionFormContainer}>
+        <ConnectionForm
+          mode="create"
+          connection={connection}
+          onDropDownSelect={onSelectFrequency}
+          onSubmit={onSubmitConnectionStep}
+          additionalSchemaControl={
+            <Button onClick={onDiscoverSchema} type="button">
+              <FontAwesomeIcon className={styles.tryArrowIcon} icon={faRedoAlt} />
+              <FormattedMessage id="connection.refreshSchema" />
+            </Button>
+          }
+        />
+      </div>
     </Suspense>
   );
 };

diff --git a/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx b/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx
@@ -29,7 +29,7 @@ import useGetStepsConfig from "./useStepsConfig";
 
 const Content = styled.div<{ big?: boolean; medium?: boolean }>`
   width: 100%;
-  max-width: ${({ big, medium }) => (big ? 1140 : medium ? 730 : 550)}px;
+  max-width: ${({ big, medium }) => (big ? 1279 : medium ? 730 : 550)}px;
   margin: 0 auto;
   padding: 75px 0 30px;
   display: flex;