Repository: provectus/kafka-ui
Issue: Topic with long name makes table looks ugly
Labels: type/enhancement
good first issue
scope/frontend
status/accepted

### Is your proposal related to a problem?

see screenshots

### Describe the solution you'd like

I think we should keep columns widths ratio stable and blur name ending if it doesnt fit column width

### Describe alternatives you've considered

### Additional context

<img width="1680" alt="Screenshot 2021-10-30 at 13 42 54" src="https://user-images.githubusercontent.com/702205/139529668-314fd955-2e80-4479-b394-c9701be8cc6d.png">
<!--
  Is there anything else you can add about the proposal?
  You might want to link to related issues here, if you haven't already.
-->

(Write your answer here.)


Issue comments:

Pull request review comments:
overflow: 'hidden', textOverflow: 'ellipsis' maybe those properties can be added by class rather than inline styling 


there is lower to this if another td without the cell if i am not mistaken we have to apply the max width thing to it as well.
This place is a general component importing something from a custom component can be wrong , for the overflow thing just create a class name put the styling in it and put in the <td>
as well as the classname passed with props. this way the component  will be general without custom imports.
put the browser td with additional class here instead of a component from a custom Class.
Please move it to `components/common/table/TableHeaderCell/TableHeaderCell.styled`

Patch that resolved the issue:
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 f3f42cdc805..4858da2d2af 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.tsx
+++ b/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}
             />
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 96d72805470..c58c7d67b06 100644
--- a/kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx
+++ b/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;
 }
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 14a89797278..1a2785b1708 100644
--- a/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx
+++ b/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>
diff --git a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts b/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts
index 44ad5284570..1e35e7d1a57 100644
--- a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts
+++ b/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;


Test patch: