Make dashboard table responsive

GW2Treasures · Dec 19, 2024 · e28fd87 · e28fd87
1 parent 02783b5
commit e28fd87
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 32 deletions.
diff --git a/apps/web/app/[language]/dashboard/dashboard.module.css b/apps/web/app/[language]/dashboard/dashboard.module.css
@@ -19,6 +19,9 @@
   top: var(--table-sticky-top, 48px);
   height: 58px;
 }
+[data-table-overflow] > .table > thead > tr > th {
+  position: static;
+}
 
 .table > tbody > tr > td {
   padding: 16px;

diff --git a/apps/web/app/[language]/dashboard/dashboard.tsx b/apps/web/app/[language]/dashboard/dashboard.tsx
@@ -22,6 +22,7 @@ import { FormatNumber } from '@/components/Format/FormatNumber';
 import { encodeColumns, type Column } from './helper';
 import { Notice } from '@gw2treasures/ui/components/Notice/Notice';
 import { State, EmptyState } from './state';
+import { TableWrapper } from '@gw2treasures/ui/components/Table/TableWrapper';
 
 const requiredScopes = [Scope.GW2_Account, Scope.GW2_Characters, Scope.GW2_Inventories, Scope.GW2_Unlocks, Scope.GW2_Tradingpost, Scope.GW2_Wallet];
 
@@ -48,31 +49,33 @@ export const Dashboard: FC<DashboardProps> = ({ initialColumns = [] }) => {
           Dashboard
         </Headline>
       </div>
-      <table className={styles.table}>
-        <thead>
-          <tr>
-            <th align="left">Account</th>
-            {columns.map((column) => (
-              <th key={`${column.type}-${column.id}`} align="right">
-                {(column.type === 'item' && column.item) ? (
-                  <ItemLink item={column.item}/>
-                ) : (column.type === 'currency' && column.currency) ? (
-                  <CurrencyLink currency={column.currency}/>
-                ) : (
-                  <>[{column.type}: {column.id}]</>
-                )}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <Gw2Accounts requiredScopes={requiredScopes} loading={null} authorizationMessage={null} loginMessage={null}>
-          {(accounts) => (
-            <tbody>
-              {accounts.map((account) => <AccountRow key={account.id} account={account} columns={columns}/>)}
-            </tbody>
-          )}
-        </Gw2Accounts>
-      </table>
+      <TableWrapper className={styles.overflow}>
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              <th align="left">Account</th>
+              {columns.map((column) => (
+                <th key={`${column.type}-${column.id}`} align="right">
+                  {(column.type === 'item' && column.item) ? (
+                    <ItemLink item={column.item}/>
+                  ) : (column.type === 'currency' && column.currency) ? (
+                    <CurrencyLink currency={column.currency}/>
+                  ) : (
+                    <>[{column.type}: {column.id}]</>
+                  )}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <Gw2Accounts requiredScopes={requiredScopes} loading={null} authorizationMessage={null} loginMessage={null}>
+            {(accounts) => (
+              <tbody>
+                {accounts.map((account) => <AccountRow key={account.id} account={account} columns={columns}/>)}
+              </tbody>
+            )}
+          </Gw2Accounts>
+        </table>
+      </TableWrapper>
       <Suspense fallback={<EmptyState icon="loading">Loading...</EmptyState>}>
         <State requiredScopes={requiredScopes}/>
       </Suspense>

diff --git a/packages/ui/components/Table/Table.module.css b/packages/ui/components/Table/Table.module.css
@@ -112,19 +112,21 @@
 }
 
 .wrapper {
-  overflow: clip;
   width: calc(100% + 32px);
   margin: 0 -16px 16px;
   padding: 0 16px;
 }
 
-.wrapperOverflow {
-  composes: wrapper;
+.noOverflow {
+  overflow: clip;
+}
+
+.overflow {
   overflow-x: scroll;
   will-change: scroll-position;
 }
 
-.wrapperOverflow > .table > thead > tr > th { position: static; }
+.overflow > .table > thead > tr > th { position: static; }
 
 @media(max-width: 760px) {
   .table { width: max-content; min-width: 100%; }

diff --git a/packages/ui/components/Table/Table.tsx b/packages/ui/components/Table/Table.tsx
@@ -19,7 +19,7 @@ export interface HeaderCellProps {
 }
 
 const Table: FC<TableProps> & { HeaderCell: FC<HeaderCellProps> } = ({ children, width = 'page' }: TableProps) => (
-  <TableWrapper>
+  <TableWrapper className={styles.wrapper}>
     <table className={width === 'page' ? styles.table : styles.tableAuto}>
       {children}
     </table>

diff --git a/packages/ui/components/Table/TableWrapper.tsx b/packages/ui/components/Table/TableWrapper.tsx
@@ -3,12 +3,14 @@
 import { Children, cloneElement, useCallback, useLayoutEffect, useRef, useState, type FC, type HTMLProps, type ReactElement } from 'react';
 import styles from './Table.module.css';
 import { useResizeObserver } from '../../lib/hooks/resize-observer';
+import { cx } from '../../lib';
 
 export interface TableWrapperProps {
   children: ReactElement<HTMLProps<HTMLElement>>;
+  className?: string;
 }
 
-export const TableWrapper: FC<TableWrapperProps> = ({ children }) => {
+export const TableWrapper: FC<TableWrapperProps> = ({ children, className }) => {
   const [isOverflowing, setIsOverflowing] = useState(false);
   const wrapper = useRef<HTMLDivElement>(null);
   const table = useRef<HTMLElement>(null);
@@ -25,7 +27,7 @@ export const TableWrapper: FC<TableWrapperProps> = ({ children }) => {
   useResizeObserver(table, checkOverflow);
 
   return (
-    <div className={isOverflowing ? styles.wrapperOverflow : styles.wrapper} ref={wrapper}>
+    <div className={cx(isOverflowing ? styles.overflow : styles.noOverflow, className)} ref={wrapper} data-table-overflow={isOverflowing ? '' : undefined}>
       {cloneElement(Children.only(children), { ref: table })}
     </div>
   );