Fix streams table from not flushing (#21675)

Author: edmundito

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;
-}

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}

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;
+  }
 }

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}