🪟 🐛 Fix UI issues in connection streams table (airbytehq#18544)

* Fix PathPopout styling * Ensure that text overflow still works * Only show tooltip when there is more than 1 * Use caret instad of sort icon so that it's centered * Fix option content for SyncSettignsDropdown so that it fits * Fix @forward on StreamHeader scss * Rollback tooltip updates
jhammarstedt · Oct 31, 2022 · 5868bb8 · 5868bb8
1 parent d0b509b
commit 5868bb8
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.module.scss
@@ -12,6 +12,7 @@
   flex-direction: row;
   justify-content: space-between;
   gap: variables.$spacing-sm;
+  max-width: 100%;
   padding: 8px;
   border-radius: variables.$border-radius-xs;
   background-color: colors.$grey-100;

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.tsx b/airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.tsx
@@ -1,4 +1,4 @@
-import { faSortDown } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 
@@ -23,7 +23,7 @@ export const PathPopoutButton: React.FC<React.PropsWithChildren<PathPopoutButton
         <Text size="sm" className={styles.text}>
           {children}
         </Text>
-        <FontAwesomeIcon className={styles.arrow} icon={faSortDown} />
+        <FontAwesomeIcon className={styles.arrow} icon={faCaretDown} />
       </button>
     }
     placement="bottom-start"

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
@@ -1,6 +1,6 @@
 @use "scss/colors";
 @use "scss/variables";
-@forward "./CatalogTreeBody.module.scss";
+@forward "./CatalogTreeHeader.module.scss";
 
 .icon {
   margin-right: 7px;

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/SyncSettingsDropdown.tsx b/airbyte-webapp/src/components/connection/CatalogTree/SyncSettingsDropdown.tsx
@@ -53,7 +53,8 @@ const Title = styled.span`
 
 const OptionContent = styled(OptionView)`
   justify-content: left;
-  font-size: 12px;
+  font-size: 11px;
+  padding: 10px;
 `;
 
 const DropdownControl = styled(components.Control)<ControlProps<DropDownOptionDataItem, false>>`
@@ -74,7 +75,7 @@ const Mode: React.FC<{
 }> = (props) => {
   return (
     <>
-      <Title> {props.title}:</Title>
+      <Title>{props.title}:</Title>
       <div>{props.label}</div>
       {props.separator ? <Separator>{props.separator}</Separator> : null}
     </>