fix: adjustments to better handle visual issues when viewport is smal…

…ler than min width of page contents
ar-io · Jun 6, 2024 · 480f753 · 480f753
1 parent 876e92a
commit 480f753
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 69 deletions.
diff --git a/src/components/TableView.tsx b/src/components/TableView.tsx
@@ -16,7 +16,7 @@ const TableView = <T, S>({
   data,
   defaultSortingState,
   isLoading,
-  noDataFoundText="No data found.",
+  noDataFoundText = 'No data found.',
   onRowClick,
 }: {
   columns: ColumnDef<T, S>[];
@@ -37,80 +37,84 @@ const TableView = <T, S>({
     onSortingChange: setSorting,
   });
 
-
   return (
     <>
-      <table className="w-full border-x border-b border-grey-500">
-        <thead className="text-xs text-low">
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                const sortState = header.column.getIsSorted();
-                return (
-                  <th key={header.id} className="py-[7.5px] pl-[24px]">
-                    <button
-                      className="flex items-center gap-1 text-left"
-                      onClick={() => {
-                        setSorting([
-                          {
-                            id: header.column.id,
-                            desc: sortState
-                              ? sortState === 'desc'
-                                ? false
-                                : true
-                              : header.column.columnDef.sortDescFirst ?? true,
-                          },
-                        ]);
-                      }}
-                    >
-                      {flexRender(
-                        header.column.columnDef.header,
-                        header.getContext(),
-                      )}
-                      {sortState ? (
-                        sortState === 'desc' ? (
-                          <SortDesc />
+      <div className="max-w-full overflow-x-auto">
+        <table className="w-full border-x border-b border-grey-500">
+          <thead className="text-xs text-low">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  const sortState = header.column.getIsSorted();
+                  return (
+                    <th key={header.id} className="py-[7.5px] pl-[24px]">
+                      <button
+                        className="flex items-center gap-1 text-left"
+                        onClick={() => {
+                          setSorting([
+                            {
+                              id: header.column.id,
+                              desc: sortState
+                                ? sortState === 'desc'
+                                  ? false
+                                  : true
+                                : header.column.columnDef.sortDescFirst ?? true,
+                            },
+                          ]);
+                        }}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                        {sortState ? (
+                          sortState === 'desc' ? (
+                            <SortDesc />
+                          ) : (
+                            <SortAsc />
+                          )
                         ) : (
-                          <SortAsc />
-                        )
-                      ) : (
-                        <div className="w-[16px]" />
-                      )}
-                    </button>
-                  </th>
-                );
-              })}
-            </tr>
-          ))}
-        </thead>
-        <tbody className="text-sm">
-          {table.getRowModel().rows.map((row) => {
-            return (
-              <tr
-                key={row.id}
-                className={`border-t border-grey-500 text-low *:py-[16px] *:pl-[24px] ${onRowClick ? 'cursor-pointer' : ''}`}
-                onClick={
-                  onRowClick ? () => onRowClick(row.original) : undefined
-                }
-              >
-                {row.getAllCells().map((cell) => (
-                  <td key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
+                          <div className="w-[16px]" />
+                        )}
+                      </button>
+                    </th>
+                  );
+                })}
               </tr>
-            );
-          })}
-        </tbody>
-      </table>
+            ))}
+          </thead>
+          <tbody className="text-sm">
+            {table.getRowModel().rows.map((row) => {
+              return (
+                <tr
+                  key={row.id}
+                  className={`border-t border-grey-500 text-low *:py-[16px] *:pl-[24px] ${onRowClick ? 'cursor-pointer' : ''}`}
+                  onClick={
+                    onRowClick ? () => onRowClick(row.original) : undefined
+                  }
+                >
+                  {row.getAllCells().map((cell) => (
+                    <td key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
       {isLoading && (
         <div className="flex items-center justify-center border-x border-b border-grey-500 px-[24px] py-[16px] text-low">
           <Placeholder className="w-full" />
         </div>
       )}
       {!isLoading && table.getRowCount() === 0 && (
         <div className="flex h-[100px] items-center justify-center border-x border-b border-grey-500 text-low">
-          {noDataFoundText} 
+          {noDataFoundText}
         </div>
       )}
     </>

diff --git a/src/index.css b/src/index.css
@@ -7,3 +7,7 @@
     @apply bg-gradient-to-r from-gradient-primary-start to-gradient-primary-end bg-clip-text text-transparent;
   }
 }
+
+body {
+  background-color: #0e0e0f;
+}
diff --git a/src/layout/AppRouterLayout.tsx b/src/layout/AppRouterLayout.tsx
@@ -4,10 +4,10 @@ import Sidebar from './Sidebar';
 
 function AppRouterLayout() {
   return (
-    <div className="h-screen w-screen dark:bg-grey-1000 dark:text-grey-100">
+    <div className="h-screen w-full dark:bg-grey-1000 dark:text-grey-100">
       <div className="flex pr-[24px]">
         <Sidebar />
-        <div className="grow">
+        <div className="w-full grow">
           <Outlet />
         </div>
       </div>

diff --git a/src/pages/Gateway/index.tsx b/src/pages/Gateway/index.tsx
@@ -396,7 +396,7 @@ const Gateway = () => {
           />
           {/* <StatsBox title="Rewards Distributed" value={gateway?} /> */}
         </div>
-        <div className="size-full grow overflow-y-auto text-clip rounded-xl border border-transparent-100-16">
+        <div className="size-full grow text-clip rounded-xl border border-transparent-100-16">
           <div className="flex items-center py-[16px] pl-[24px] pr-[12px]">
             <div className="text-sm text-high">General Information</div>
             <div className="flex grow gap-[24px]" />

diff --git a/src/pages/Gateways/index.tsx b/src/pages/Gateways/index.tsx
@@ -151,7 +151,7 @@ const Gateways = () => {
   ];
 
   return (
-    <div className="flex h-screen flex-col gap-[24px] overflow-y-scroll">
+    <div className="flex h-screen flex-col gap-[24px] overflow-scroll">
       <Header />
       <Banner />
       <div className="mb-[32px]">

diff --git a/src/pages/Staking/ConnectedLandingPage.tsx b/src/pages/Staking/ConnectedLandingPage.tsx
@@ -55,7 +55,7 @@ const ConnectedLandingPage = () => {
   ];
 
   return (
-    <div className="flex flex-col gap-[24px] overflow-y-scroll py-[24px]">
+    <div className="flex flex-col gap-[24px] py-[24px]">
       <div className="grid grid-cols-3 gap-[24px]">
         {topPanels.map((panel, index) => (
           <div
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,3 +7,7 @@ @@
         @apply bg-gradient-to-r from-gradient-primary-start to-gradient-primary-end bg-clip-text text-transparent;
       }
     }
+    body {
+      background-color: #0e0e0f;
+    }