Repository: provectus/kafka-ui
Issue: Topic names do not fit in a table cell
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
The names of topics do not fit in a table cell when the screen resolution is 1440 x 900, Macbook Air, 13,3 inch

**Screenshots**
![image](https://user-images.githubusercontent.com/22497195/162174931-96147b9a-aff3-445f-a595-8370f5c71ba4.png)
![image](https://user-images.githubusercontent.com/22497195/162174993-76f2de8f-f647-4dd3-85f6-76f93ec52a5e.png)


Issue comments:
Hello there lazzy-panda! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀

Pull request review comments:
here you should pass up true in this case instead of hardcoding it into the component which is used several places , you just go to this table page and pass the up prop to the dropdown
this should be dependent on the props as mentioned in the upper comment
the list should open downwards
Pls remove this unused DropdownDivider
Are you sure it will not break any other tables?
I have checked the rest of the tables, it does not have a negative effect on them
done
Should this up option be removed?
I think it should be there. Because we can't see the last item dropdown in other case.

Patch that resolved the issue:
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 18930410a51..6b0e4e52c64 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 322c1449385..40b29e23fe1 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 e8f3c34533d..8f95699a2a0 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 95ad6b8ba53..7884dc24089 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 f7dc5b1fd1b..994e1b1fb76 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 {


Test patch: