Add scrollable wrapper to the new table component (#2692)

kafka-ui-react-app/src/components/App.styled.ts

@@ -20,9 +20,10 @@ export const Container = styled.main(
     position: relative;
     padding-bottom: 30px;
     z-index: 20;
-
+    max-width: calc(100vw - ${theme.layout.navBarWidth});
     @media screen and (max-width: 1023px) {
       margin-left: initial;
+      max-width: 100vw;
     }
   `
 );

kafka-ui-react-app/src/components/Brokers/Broker/Configs/Configs.styled.ts

@@ -12,7 +12,7 @@ export const Value = styled.span`
   line-height: 24px;
   margin-right: 10px;
   text-overflow: ellipsis;
-  width: 600px;
+  max-width: 400px;
   overflow: hidden;
   white-space: nowrap;
 `;

kafka-ui-react-app/src/components/Brokers/Broker/Configs/InputCell.tsx

@@ -70,7 +70,7 @@ const InputCell: React.FC<InputCellProps> = ({ row, getValue, onUpdate }) => {
           : { fontWeight: 400 }
       }
     >
-      <S.Value>{initialValue}</S.Value>
+      <S.Value title={initialValue}>{initialValue}</S.Value>
       <Button
         buttonType="primary"
         buttonSize="S"

kafka-ui-react-app/src/components/Topics/Topic/MessagesV2/Messages.styled.ts

@@ -14,7 +14,7 @@ export const Wrapper = styled.div(
 
 export const Sidebar = styled.div(
   ({ theme }) => css`
-    width: 300px;
+    width: ${theme.layout.filtersSidebarWidth};
     position: sticky;
     top: ${theme.layout.navBarHeight};
     align-self: start;
@@ -27,7 +27,9 @@ export const SidebarContent = styled.div`
 
 export const TableWrapper = styled.div(
   ({ theme }) => css`
-    width: 100%;
+    width: calc(
+      100vw - ${theme.layout.navBarWidth} - ${theme.layout.filtersSidebarWidth}
+    );
     border-left: 1px solid ${theme.layout.stuffBorderColor};
   `
 );

kafka-ui-react-app/src/components/common/NewTable/Table.styled.ts

@@ -211,3 +211,7 @@ export const Ellipsis = styled.div`
   text-overflow: ellipsis;
   display: block;
 `;
+
+export const TableWrapper = styled.div`
+  overflow-x: auto;
+`;

kafka-ui-react-app/src/components/common/NewTable/Table.tsx

@@ -198,95 +198,97 @@ const Table: React.FC<TableProps<any>> = ({
           />
         </S.TableActionsBar>
       )}
-      <S.Table>
+      <S.TableWrapper>
-        <thead>
+        <S.Table>
-          {table.getHeaderGroups().map((headerGroup) => (
+          <thead>
-            <tr key={headerGroup.id}>
+            {table.getHeaderGroups().map((headerGroup) => (
-              {!!enableRowSelection && (
+              <tr key={headerGroup.id}>
-                <S.Th key={`${headerGroup.id}-select`}>
-                  {flexRender(
-                    SelectRowHeader,
-                    headerGroup.headers[0].getContext()
-                  )}
-                </S.Th>
-              )}
-              {table.getCanSomeRowsExpand() && (
-                <S.Th expander key={`${headerGroup.id}-expander`} />
-              )}
-              {headerGroup.headers.map((header) => (
-                <S.Th
-                  key={header.id}
-                  colSpan={header.colSpan}
-                  sortable={header.column.getCanSort()}
-                  sortOrder={header.column.getIsSorted()}
-                  onClick={header.column.getToggleSortingHandler()}
-                >
-                  <div>
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                  </div>
-                </S.Th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {table.getRowModel().rows.map((row) => (
-            <React.Fragment key={row.id}>
-              <S.Row
-                expanded={row.getIsExpanded()}
-                onClick={handleRowClick(row)}
-                clickable={
-                  !enableRowSelection &&
-                  (row.getCanExpand() || onRowClick !== undefined)
-                }
-              >
                 {!!enableRowSelection && (
-                  <td key={`${row.id}-select`} style={{ width: '1px' }}>
+                  <S.Th key={`${headerGroup.id}-select`}>
                     {flexRender(
-                      SelectRowCell,
+                      SelectRowHeader,
-                      row.getVisibleCells()[0].getContext()
+                      headerGroup.headers[0].getContext()
                     )}
-                  </td>
+                  </S.Th>
                 )}
                 {table.getCanSomeRowsExpand() && (
-                  <td key={`${row.id}-expander`} style={{ width: '1px' }}>
+                  <S.Th expander key={`${headerGroup.id}-expander`} />
-                    {flexRender(
-                      ExpanderCell,
-                      row.getVisibleCells()[0].getContext()
-                    )}
-                  </td>
                 )}
-                {row
+                {headerGroup.headers.map((header) => (
-                  .getVisibleCells()
+                  <S.Th
-                  .map(({ id, getContext, column: { columnDef } }) => (
+                    key={header.id}
-                    <td key={id} style={columnDef.meta}>
+                    colSpan={header.colSpan}
-                      {flexRender(columnDef.cell, getContext())}
+                    sortable={header.column.getCanSort()}
+                    sortOrder={header.column.getIsSorted()}
+                    onClick={header.column.getToggleSortingHandler()}
+                  >
+                    <div>
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                    </div>
+                  </S.Th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table.getRowModel().rows.map((row) => (
+              <React.Fragment key={row.id}>
+                <S.Row
+                  expanded={row.getIsExpanded()}
+                  onClick={handleRowClick(row)}
+                  clickable={
+                    !enableRowSelection &&
+                    (row.getCanExpand() || onRowClick !== undefined)
+                  }
+                >
+                  {!!enableRowSelection && (
+                    <td key={`${row.id}-select`} style={{ width: '1px' }}>
+                      {flexRender(
+                        SelectRowCell,
+                        row.getVisibleCells()[0].getContext()
+                      )}
                     </td>
-                  ))}
+                  )}
-              </S.Row>
+                  {table.getCanSomeRowsExpand() && (
-              {row.getIsExpanded() && SubComponent && (
+                    <td key={`${row.id}-expander`} style={{ width: '1px' }}>
-                <S.Row expanded>
+                      {flexRender(
-                  <td colSpan={row.getVisibleCells().length + 2}>
+                        ExpanderCell,
-                    <S.ExpandedRowInfo>
+                        row.getVisibleCells()[0].getContext()
-                      <SubComponent row={row} />
+                      )}
-                    </S.ExpandedRowInfo>
+                    </td>
-                  </td>
+                  )}
+                  {row
+                    .getVisibleCells()
+                    .map(({ id, getContext, column: { columnDef } }) => (
+                      <td key={id} style={columnDef.meta}>
+                        {flexRender(columnDef.cell, getContext())}
+                      </td>
+                    ))}
                 </S.Row>
-              )}
+                {row.getIsExpanded() && SubComponent && (
-            </React.Fragment>
+                  <S.Row expanded>
-          ))}
+                    <td colSpan={row.getVisibleCells().length + 2}>
-          {table.getRowModel().rows.length === 0 && (
+                      <S.ExpandedRowInfo>
-            <S.Row>
+                        <SubComponent row={row} />
-              <S.EmptyTableMessageCell colSpan={100}>
+                      </S.ExpandedRowInfo>
-                {emptyMessage || 'No rows found'}
+                    </td>
-              </S.EmptyTableMessageCell>
+                  </S.Row>
-            </S.Row>
+                )}
-          )}
+              </React.Fragment>
-        </tbody>
+            ))}
-      </S.Table>
+            {table.getRowModel().rows.length === 0 && (
+              <S.Row>
+                <S.EmptyTableMessageCell colSpan={100}>
+                  {emptyMessage || 'No rows found'}
+                </S.EmptyTableMessageCell>
+              </S.Row>
+            )}
+          </tbody>
+        </S.Table>
+      </S.TableWrapper>
       {table.getPageCount() > 1 && (
         <S.Pagination>
           <S.Pages>

kafka-ui-react-app/src/theme/theme.ts

@@ -90,6 +90,7 @@ const theme = {
     navBarWidth: '201px',
     navBarHeight: '53px',
     rightSidebarWidth: '70vw',
+    filtersSidebarWidth: '300px',
 
     stuffColor: Colors.neutral[5],
     stuffBorderColor: Colors.neutral[10],