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 <[email protected]>

Author: lazzy-panda

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 {

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

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

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

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 {