From 5868bb8bf30f0cb5b6334ea7893d3b65294e6639 Mon Sep 17 00:00:00 2001
From: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com>
Date: Thu, 27 Oct 2022 11:19:32 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20=F0=9F=90=9B=20Fix=20UI=20issues?=
 =?UTF-8?q?=20in=20connection=20streams=20table=20(#18544)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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
---
 .../connection/CatalogTree/PathPopoutButton.module.scss      | 1 +
 .../components/connection/CatalogTree/PathPopoutButton.tsx   | 4 ++--
 .../connection/CatalogTree/StreamHeader.module.scss          | 2 +-
 .../connection/CatalogTree/SyncSettingsDropdown.tsx          | 5 +++--
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.module.scss
index 0b1615bbf20e..097557198a45 100644
--- 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
index 91513e04d88f..b7c685c5870b 100644
--- 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
index 2bd4fa8812e8..f7a7b2fed34a 100644
--- 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
index 9dee9dd87178..d54b049e5c4d 100644
--- 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}
     </>