Repository: provectus/kafka-ui
Issue: Topics' sandwich menu is broken
Labels: type/bug
scope/frontend
status/accepted
status/confirmed
type/regression

**Describe the bug**
<!--(A clear and concise description of what the bug is.)-->
The sandwich menu isn`t showing on the page Topics

**Set up**
<!--
(How do you run the app? 
Which version of the app are you running? Provide either docker image version or check commit hash at the top left corner. We won't be able to help you without this information.)
-->
http://master.internal.kafka-ui.provectus.io/

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to local->Topics
2. Go to the end of a topic`s string 
3. Click the sandwich menu
4. Observe: menu is not showing

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->

**Screenshots**
<!--
(If applicable, add screenshots to help explain your problem)
-->

**Additional context**
<!--
(Add any other context about the problem here)
-->


Issue comments:

Pull request review comments:
should we add this style by default? 
can we maybe pass action prop instead of style tag -> where it would insert a td created by styled component which have overflow thingy on it , so we would not have specificity issues in the future. 

OR 

this API actually allows you to pass a custom Cell you can create your own cell with those properties and put it here and it will work like a charm.
I passed a styled component with props as a custom td component.

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/List/List.styled.ts b/kafka-ui-react-app/src/components/Topics/List/List.styled.ts
index a7c5bb328a4..c8d4a14533d 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.styled.ts
+++ b/kafka-ui-react-app/src/components/Topics/List/List.styled.ts
@@ -1,3 +1,4 @@
+import { Td } from 'components/common/table/TableHeaderCell/TableHeaderCell.styled';
 import { NavLink } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 
@@ -20,3 +21,7 @@ export const Link = styled(NavLink).attrs({ activeClassName: 'is-active' })<{
     }
   `
 );
+
+export const ActionsTd = styled(Td)`
+  overflow: visible;
+`;
diff --git a/kafka-ui-react-app/src/components/Topics/List/List.tsx b/kafka-ui-react-app/src/components/Topics/List/List.tsx
index dc22ac81042..6c4ec05b57f 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx
@@ -39,6 +39,7 @@ import {
   TitleCell,
   TopicSizeCell,
 } from './TopicsTableCells';
+import { ActionsTd } from './List.styled';
 
 export interface TopicsListProps {
   areTopicsFetching: boolean;
@@ -350,8 +351,8 @@ const List: React.FC<TopicsListProps> = ({
             />
             <TableColumn
               maxWidth="4%"
-              className="topic-action-block"
               cell={ActionsCell}
+              customTd={ActionsTd}
             />
           </SmartTable>
         </div>
diff --git a/kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx b/kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx
index c58c7d67b06..27f03398607 100644
--- a/kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx
+++ b/kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx
@@ -36,11 +36,12 @@ interface TableColumnProps<T, TId extends IdType, OT = never> {
   maxWidth?: string;
   className?: string;
   orderValue?: OT;
+  customTd?: typeof S.Td;
 }
 
 export const TableColumn = <T, TId extends IdType, OT = never>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: React.PropsWithChildren<TableColumnProps<T, TId, OT>>
+  _props: React.PropsWithChildren<TableColumnProps<T, TId, OT>>
 ): React.ReactElement => {
   return <td />;
 };
diff --git a/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx b/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx
index 1a2785b1708..446d52e46c7 100644
--- a/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx
+++ b/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx
@@ -62,23 +62,24 @@ export const TableRow = <T, TId extends IdType, OT = never>({
         if (!isColumnElement<T, TId>(child)) {
           return child;
         }
-        const { cell, field, maxWidth, className } = child.props;
+        const { cell, field, maxWidth, customTd } = child.props;
 
         const Cell = cell as React.FC<TableCellProps<T, TId, OT>> | undefined;
+        const TdComponent = customTd || Td;
 
-        return Cell ? (
-          <Td className={className} maxWidth={maxWidth}>
-            <Cell
-              tableState={tableState}
-              hovered={hovered}
-              rowIndex={index}
-              dataItem={dataItem}
-            />
-          </Td>
-        ) : (
-          <Td className={className} maxWidth={maxWidth}>
-            {field && propertyLookup(field, dataItem)}
-          </Td>
+        return (
+          <TdComponent maxWidth={maxWidth}>
+            {Cell ? (
+              <Cell
+                tableState={tableState}
+                hovered={hovered}
+                rowIndex={index}
+                dataItem={dataItem}
+              />
+            ) : (
+              field && propertyLookup(field, dataItem)
+            )}
+          </TdComponent>
         );
       })}
     </tr>


Test patch: