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,6 +198,7 @@ const Table: React.FC<TableProps<any>> = ({
           />
         </S.TableActionsBar>
       )}
+      <S.TableWrapper>
         <S.Table>
           <thead>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -287,6 +288,7 @@ const Table: React.FC<TableProps<any>> = ({
             )}
           </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],