row styling

Author: teallarson

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss

@@ -21,8 +21,11 @@
   gap: variables.$spacing-sm;
   display: flex;
   flex-direction: row;
-  align-items: space-between;
+  justify-content: flex-start;
+  align-items: center;
   width: 100%;
+  margin-top: variables.$spacing-lg;
+  margin-bottom: variables.$spacing-lg;
 
   &:hover {
     background: colors.$grey-30;
@@ -59,3 +62,8 @@
   min-width: 0;
   padding-left: variables.$spacing-xs;
 }
+
+.arrowCell {
+  width: 20px;
+  padding: 0;
+}

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx

@@ -94,7 +94,7 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
         {stream.stream?.name}
       </HeaderCell>
       {/* todo: this is weird, we have a cell nested inside a cell */}
-      <Cell className={styles.streamRowItem}>
+      <Cell>
         {disabled ? (
           <HeaderCell ellipsis title={syncSchema.syncMode}>
             {syncSchema.syncMode}
@@ -124,9 +124,7 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
           />
         )}
       </HeaderCell>
-      <Cell className={styles.streamRowItem}>
-        <FontAwesomeIcon icon={faArrowRight} />
-      </Cell>
+      <FontAwesomeIcon icon={faArrowRight} className={styles.arrowCell} />
       <HeaderCell ellipsis title={destNamespace} className={styles.streamRowItem}>
         {destNamespace}
       </HeaderCell>

airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.module.scss

@@ -1,3 +1,5 @@
+@use "scss/variables";
+
 .pillSelect {
-  width: 100%;
+  width: variables.$width-wide-menu;
 }

airbyte-webapp/src/scss/_variables.scss

@@ -18,6 +18,7 @@ $spacing-page-bottom: 150px;
 $main-page-content-min-width: 960px;
 
 $width-size-menu: 93px;
+$width-wide-menu: 200px;
 
 $width-modal-sm: 492px;
 $width-modal-md: 585px;