🪟 🎨 Builder UI layout fixes (#11695)

airbytehq · Mar 18, 2024 · 6259173 · 6259173
1 parent c627c5c
commit 6259173
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 5 deletions.
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/Builder.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/Builder.module.scss
@@ -13,5 +13,5 @@
   padding: variables.$spacing-xl;
   overflow: auto;
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
 }
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderConfigView.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderConfigView.module.scss
@@ -10,6 +10,7 @@
   height: fit-content;
   min-height: 100%;
   width: 100%;
+  min-width: 525px;
 }
 
 .heading {

diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.module.scss
@@ -13,6 +13,7 @@
 
   // Set line-height to 1 to make this centered with the info tooltip icon, and because this is a single line anyway
   line-height: 1;
+  padding-top: 2px;
 }
 
 .viewButton {

diff --git a/airbyte-webapp/src/components/connectorBuilder/SchemaConflictIndicator.tsx b/airbyte-webapp/src/components/connectorBuilder/SchemaConflictIndicator.tsx
@@ -11,6 +11,7 @@ export const SchemaConflictIndicator: React.FC<{ errors?: string[] }> = ({ error
     control={
       <Icon
         type="warningOutline"
+        size="sm"
         className={classNames({
           [styles.schemaConflictWarningIcon]: !errors,
           [styles.schemaConflictErrorIcon]: errors,

diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/PageDisplay.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/PageDisplay.tsx
@@ -88,7 +88,7 @@ export const PageDisplay: React.FC<PageDisplayProps> = ({ page, className, infer
           {
             key: "schema",
             title: (
-              <FlexContainer direction="row" justifyContent="center">
+              <FlexContainer direction="row" justifyContent="center" alignItems="center" gap="sm">
                 <FormattedMessage id="connectorBuilder.schemaTab" />
                 {mode === "ui" && schemaDifferences && !autoImportSchema && (
                   <SchemaConflictIndicator errors={incompatibleSchemaErrors} />

diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/TabbedDisplay.module.scss b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/TabbedDisplay.module.scss
@@ -24,6 +24,9 @@
   font-weight: 500;
   cursor: pointer;
   padding: 3px;
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .selected {

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -1095,7 +1095,7 @@
   "connectorBuilder.recordsTab": "Records",
   "connectorBuilder.requestTab": "Request",
   "connectorBuilder.responseTab": "Response",
-  "connectorBuilder.schemaTab": "Detected schema",
+  "connectorBuilder.schemaTab": "Detected Schema",
   "connectorBuilder.useSchemaButton": "Import detected schema",
   "connectorBuilder.differentSchemaDescription": "Detected schema and declared schema are different",
   "connectorBuilder.overwriteSchemaButton": "Overwrite declared schema",
@@ -1186,7 +1186,7 @@
   "connectorBuilder.duplicateFieldID": "Make sure no field ID is used multiple times",
   "connectorBuilder.addNewParentStream": "Add new parent stream",
   "connectorBuilder.streamConfiguration": "Configuration",
-  "connectorBuilder.streamSchema": "Declared schema",
+  "connectorBuilder.streamSchema": "Declared Schema",
   "connectorBuilder.invalidJSON": "Invalid JSON - please fix syntax to have it applied",
   "connectorBuilder.copyToPaginationTitle": "Copy pagination settings to...",
   "connectorBuilder.copyFromPaginationTitle": "Import pagination settings from...",

diff --git a/...e-webapp/src/pages/connectorBuilder/ConnectorBuilderEditPage/ConnectorBuilderEditPage.tsx b/...e-webapp/src/pages/connectorBuilder/ConnectorBuilderEditPage/ConnectorBuilderEditPage.tsx
@@ -112,7 +112,7 @@ const Panels = React.memo(() => {
               </>
             ),
             className: styles.leftPanel,
-            minWidth: 550,
+            minWidth: 350,
           },
           {
             children: <StreamTestingPanel />,