chore: fixing table issue

Author: Hubert Koster

src/features/dashboard/components/ApiTokenTable/api-table.module.scss

@@ -2,11 +2,9 @@
 
 .api_table_container {
   position: relative;
-  .api_table {
-    height: rem(30);
-    min-height: 10rem;
-    table {
-      position: absolute;
-    }
+  overflow-y: hidden;
+  overflow-x: auto;
+  .api_table table {
+    position: absolute;
   }
 }

src/features/dashboard/components/ApiTokenTable/index.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, useEffect, useRef, useState } from 'react';
 import { Circles } from 'react-loader-spinner';
 import styles from './api-table.module.scss';
 import useApiToken from '@site/src/hooks/useApiToken';
@@ -38,10 +38,24 @@ const tableColumns: TTokenColumn[] = [
 ];
 
 const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
+  const TABLE_HEADER_HEIGHT = 125;
   const { tokens, isLoadingTokens } = useApiToken();
+  const [table_height, setTableHeight] = useState(0);
+  const table_row_ref = useRef(null);
+
+  useEffect(() => {
+    const row_element_exists = table_row_ref !== null;
+    if (tokens.length > 0 && row_element_exists) {
+      const row_height = table_row_ref.current.clientHeight;
+      setTableHeight(row_height * tokens.length);
+    }
+  }, [tokens, table_row_ref]);
 
   return (
-    <div className={styles.api_table_container}>
+    <div
+      style={{ height: `calc(${table_height}px + ${TABLE_HEADER_HEIGHT}px + 50px)` }}
+      className={styles.api_table_container}
+    >
       <div className={styles.api_table} {...props}>
         <Circles
           height='100'
@@ -55,6 +69,7 @@ const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
           columns={tableColumns}
           data={tokens}
           initialState={{ hiddenColumns: ['valid_for_ip'] }}
+          table_row_ref={table_row_ref}
         />
       </div>
     </div>

src/features/dashboard/components/NoApps/no-apps.module.scss

@@ -10,7 +10,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  justify-content: var(center);
+  justify-content: center;
   align-items: center;
   width: calc(rem(32) - rem(3.2));
   position: relative;
@@ -28,13 +28,13 @@
   height: rem(10);
 }
 
-.noAppsText {
+.noAppsText p {
   text-align: center;
+  margin-bottom: rem(2);
 }
 
 [data-state*="responsive.desktop"] {
   .noAppsWrapper {
-    width: calc(100% - rem(12.5));
     position: relative;
   }
   .noApps {

src/features/dashboard/components/Table/index.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, LegacyRef, ReactNode } from 'react';
 import { Cell, Column, TableState, useTable } from 'react-table';
 import './table.scss';
 
@@ -8,6 +8,7 @@ interface ITableProps<T extends object> extends HTMLAttributes<HTMLTableElement>
   data: T[];
   columns: Column<T>[];
   initialState?: TableState<T>;
+  table_row_ref: LegacyRef<HTMLTableRowElement>;
   getCustomCellProps?: (cell: Cell<T, unknown>) => object;
 }
 
@@ -16,6 +17,7 @@ const Table = <T extends object>({
   columns,
   initialState,
   getCustomCellProps = defaultPropGetter,
+  table_row_ref,
   ...rest
 }: ITableProps<T>) => {
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable<T>({
@@ -41,7 +43,7 @@ const Table = <T extends object>({
         {rows.map((row) => {
           prepareRow(row);
           return (
-            <tr key={row.getRowProps().key} {...row.getRowProps()}>
+            <tr ref={table_row_ref} key={row.getRowProps().key} {...row.getRowProps()}>
               {row.cells.map((cell) => {
                 return (
                   <td key={cell.getCellProps().key} {...cell.getCellProps()}>

src/features/dashboard/components/Table/table.scss

@@ -5,6 +5,9 @@
     display: table;
     min-width: 765px;
     width: 100%;
+    tr {
+      height: rem(12.5);
+    }
   }
 
   thead {

src/features/dashboard/components/Tabs/tabs.module.scss

@@ -51,4 +51,5 @@
   justify-content: space-around;
   align-items: center;
   padding: rem(2);
+  overflow-y: auto;
 }