Added maxWidth to the table row styles (#1810)

* Added new styles to table cells
* Styled td component moved to TableHeaderCell.styled

Co-authored-by: k.morozov <k.morozov@ffin.ru>

kafka-ui-react-app/src/components/Topics/List/List.tsx

@@ -318,7 +318,7 @@ const List: React.FC<TopicsListProps> = ({
             hoverable
           >
             <TableColumn
-              width="44%"
+              maxWidth="350px"
               title="Topic Name"
               cell={TitleCell}
               orderValue={TopicColumnsToSort.NAME}
@@ -341,7 +341,7 @@ const List: React.FC<TopicsListProps> = ({
               orderValue={TopicColumnsToSort.SIZE}
             />
             <TableColumn
-              width="4%"
+              maxWidth="4%"
               className="topic-action-block"
               cell={ActionsCell}
             />

kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx

@@ -33,7 +33,7 @@ interface TableColumnProps<T, TId extends IdType, OT = never> {
   headerCell?: React.FC<TableHeaderCellProps<T, TId, OT>>;
   field?: string;
   title?: string;
-  width?: string;
+  maxWidth?: string;
   className?: string;
   orderValue?: OT;
 }

kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { propertyLookup } from 'lib/propertyLookup';
 import { TableState } from 'lib/hooks/useTableState';
+import { Td } from 'components/common/table/TableHeaderCell/TableHeaderCell.styled';
 
 import { isColumnElement, SelectCell, TableCellProps } from './TableColumn';
 
@@ -61,23 +62,23 @@ export const TableRow = <T, TId extends IdType, OT = never>({
         if (!isColumnElement<T, TId>(child)) {
           return child;
         }
-        const { cell, field, width, className } = child.props;
+        const { cell, field, maxWidth, className } = child.props;
 
         const Cell = cell as React.FC<TableCellProps<T, TId, OT>> | undefined;
 
         return Cell ? (
-          <td className={className} style={{ width }}>
+          <Td className={className} maxWidth={maxWidth}>
             <Cell
               tableState={tableState}
               hovered={hovered}
               rowIndex={index}
               dataItem={dataItem}
             />
-          </td>
+          </Td>
         ) : (
-          <td className={className} style={{ width }}>
+          <Td className={className} maxWidth={maxWidth}>
             {field && propertyLookup(field, dataItem)}
-          </td>
+          </Td>
         );
       })}
     </tr>

kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts

@@ -67,6 +67,12 @@ const DESCMixin = css(
   `
 );
 
+export const Td = styled.td<{ maxWidth?: string }>`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${(props) => props.maxWidth};
+`;
+
 export const Title = styled.span<TitleProps>(
   ({ isOrderable, isOrdered, sortOrder, theme: { table } }) => css`
     font-family: Inter, sans-serif;