Fix streams table from not flushing (#21675)

airbytehq · Jan 24, 2023 · e4f4718 · e4f4718
1 parent e2139d9
commit e4f4718
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/ConnectionFormFields.module.scss b/airbyte-webapp/src/components/connection/ConnectionForm/ConnectionFormFields.module.scss
@@ -35,8 +35,3 @@
   // used to control svg size
   font-size: 14px;
 }
-
-.flush {
-  padding: 0;
-  gap: 0;
-}
diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/ConnectionFormFields.tsx b/airbyte-webapp/src/components/connection/ConnectionForm/ConnectionFormFields.tsx
@@ -127,7 +127,7 @@ export const ConnectionFormFields: React.FC<ConnectionFormFieldsProps> = ({ valu
             </Field>
           </Section>
         )}
-        <Section className={styles.flush}>
+        <Section flush>
           <Field
             name="syncCatalog.streams"
             component={SyncCatalogField}

diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/Section.module.scss b/airbyte-webapp/src/components/connection/ConnectionForm/Section.module.scss
@@ -10,4 +10,9 @@
   &:not(:last-child) {
     box-shadow: 0 1px 0 rgba(139, 139, 160, 25%);
   }
+
+  &.flush {
+    padding: 0;
+    gap: 0;
+  }
 }
diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/Section.tsx b/airbyte-webapp/src/components/connection/ConnectionForm/Section.tsx
@@ -7,13 +7,14 @@ import styles from "./Section.module.scss";
 
 interface SectionProps {
   title?: React.ReactNode;
+  flush?: boolean;
   className?: string;
 }
 
-export const Section: React.FC<React.PropsWithChildren<SectionProps>> = ({ title, children, className }) => {
+export const Section: React.FC<React.PropsWithChildren<SectionProps>> = ({ title, flush, children, className }) => {
   return (
     <Card>
-      <div className={classNames(styles.section, className)}>
+      <div className={classNames(styles.section, { [styles.flush]: flush }, className)}>
         {title && (
           <Heading as="h2" size="sm">
             {title}