From db217e16053a9e96808af6b21e0318985b5c79ee Mon Sep 17 00:00:00 2001
From: Kirill Morozov <grifx.design@gmail.com>
Date: Fri, 22 Apr 2022 16:33:00 +0300
Subject: [PATCH] Fix topic names fitting in a table cell (#1812)

* Fixed tags width and added scroll to the table

* Dropdown position fixed

* Prop up=true moved directly to the table

* Scroll removed, table resized

* Unused divider removed

* Removed extra Divider import

Co-authored-by: k.morozov <k.morozov@ffin.ru>
---
 .../Overview/__tests__/__snapshots__/Overview.spec.tsx.snap | 3 +++
 .../Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap       | 6 +++++-
 kafka-ui-react-app/src/components/Connect/List/ListItem.tsx | 4 +---
 kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx | 1 +
 .../src/components/common/table/Table/Table.styled.ts       | 2 ++
 5 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap
index 18930410a5..6b0e4e52c6 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap
@@ -13,6 +13,9 @@ exports[`Overview view matches snapshot 1`] = `
   padding-left: 0.75em;
   padding-right: 0.75em;
   text-align: center;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
 }
 
 .c0 {
diff --git a/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap
index 322c144938..40b29e23fe 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap
@@ -12,6 +12,8 @@ exports[`Tasks view matches snapshot 1`] = `
   padding: 8px 8px 8px 24px;
   color: #171A1C;
   vertical-align: middle;
+  max-width: 350px;
+  word-wrap: break-word;
 }
 
 .c0 tbody > tr:hover {
@@ -182,6 +184,8 @@ exports[`Tasks view matches snapshot when no tasks 1`] = `
   padding: 8px 8px 8px 24px;
   color: #171A1C;
   vertical-align: middle;
+  max-width: 350px;
+  word-wrap: break-word;
 }
 
 .c0 tbody > tr:hover {
@@ -279,4 +283,4 @@ exports[`Tasks view matches snapshot when no tasks 1`] = `
     </tr>
   </tbody>
 </table>
-`;
\ No newline at end of file
+`;
diff --git a/kafka-ui-react-app/src/components/Connect/List/ListItem.tsx b/kafka-ui-react-app/src/components/Connect/List/ListItem.tsx
index e8f3c34533..8f95699a2a 100644
--- a/kafka-ui-react-app/src/components/Connect/List/ListItem.tsx
+++ b/kafka-ui-react-app/src/components/Connect/List/ListItem.tsx
@@ -6,7 +6,6 @@ import { Link, NavLink } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { deleteConnector } from 'redux/actions';
 import Dropdown from 'components/common/Dropdown/Dropdown';
-import DropdownDivider from 'components/common/Dropdown/DropdownDivider';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
 import { Tag } from 'components/common/Tag/Tag.styled';
@@ -84,8 +83,7 @@ const ListItem: React.FC<ListItemProps> = ({
       </td>
       <td>
         <div>
-          <Dropdown label={<VerticalElipsisIcon />} right>
-            <DropdownDivider />
+          <Dropdown label={<VerticalElipsisIcon />} right up>
             <DropdownItem
               onClick={() => setDeleteConnectorConfirmationVisible(true)}
               danger
diff --git a/kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx b/kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx
index 95ad6b8ba5..7884dc2408 100644
--- a/kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx
+++ b/kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx
@@ -16,4 +16,5 @@ export const Tag = styled.p<Props>`
   padding-left: 0.75em;
   padding-right: 0.75em;
   text-align: center;
+  width: max-content;
 `;
diff --git a/kafka-ui-react-app/src/components/common/table/Table/Table.styled.ts b/kafka-ui-react-app/src/components/common/table/Table/Table.styled.ts
index f7dc5b1fd1..994e1b1fb7 100644
--- a/kafka-ui-react-app/src/components/common/table/Table/Table.styled.ts
+++ b/kafka-ui-react-app/src/components/common/table/Table/Table.styled.ts
@@ -14,6 +14,8 @@ export const Table = styled.table<Props>`
     padding: 8px 8px 8px 24px;
     color: ${({ theme }) => theme.table.td.color.normal};
     vertical-align: middle;
+    max-width: 350px;
+    word-wrap: break-word;
   }
 
   & tbody > tr {