Fix broken topics' sandwich menu (#1829)

* fix topic list invisible actions menu

* use styled component instead of inline styles

* remove unnecessary prop type

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>

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

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>

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 />;
 };

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>