fix alignment + remove layout context

chanzuckerberg · Nov 5, 2024 · 996d2d8 · 996d2d8
1 parent 7b7c24e
commit 996d2d8
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 101 deletions.
diff --git a/frontend/packages/data-portal/app/components/Table/Table.tsx b/frontend/packages/data-portal/app/components/Table/Table.tsx
@@ -17,7 +17,6 @@ import {
 import { Fragment, ReactNode } from 'react'
 
 import { ErrorBoundary } from 'app/components/ErrorBoundary'
-import { useLayout } from 'app/context/Layout.context'
 import { cns } from 'app/utils/cns'
 
 export interface TableProps<T> {
@@ -46,8 +45,6 @@ export function Table<T>({
   getAfterTableElement,
   onTableRowClick,
 }: TableProps<T>) {
-  const { hasFilters } = useLayout()
-
   const table = useReactTable<T>({
     columns,
     data,
@@ -59,15 +56,7 @@ export function Table<T>({
   }
 
   return (
-    <TableContainer
-      className={cns(
-        classes?.container,
-
-        // Need to subtract 244px from 100vw to account for the sidebar and padding:
-        // sidebar width = 200px, padding = 22px * 2 = 44px
-        hasFilters && 'max-w-[calc(100vw-244px)]',
-      )}
-    >
+    <TableContainer className={classes?.container}>
       <SDSTable {...tableProps} className={cns('!table-auto', classes?.table)}>
         <TableHeader>
           {table.getFlatHeaders().map((header) => {

diff --git a/frontend/packages/data-portal/app/components/TablePageLayout/TableHeaderDefinition.tsx b/frontend/packages/data-portal/app/components/TablePageLayout/TableHeaderDefinition.tsx
@@ -20,7 +20,7 @@ export function TableHeaderDefinition({
   const { t } = useI18n()
 
   return (
-    <div className="pt-sds-l px-sds-xxl">
+    <div className="pt-sds-l px-sds-xl max-w-content">
       <h1 className="text-sds-header-xxl leading-sds-header-xxl tracking-sds-header-xxl font-semibold">
         {title}
       </h1>

diff --git a/frontend/packages/data-portal/app/components/TablePageLayout/TablePageLayout.tsx b/frontend/packages/data-portal/app/components/TablePageLayout/TablePageLayout.tsx
@@ -1,13 +1,12 @@
 import { Pagination } from '@czi-sds/components'
 import { useSearchParams } from '@remix-run/react'
-import { ComponentType, ReactNode, useEffect, useMemo } from 'react'
+import { ComponentType, ReactNode, useEffect } from 'react'
 
 import { Tabs } from 'app/components/Tabs'
 import { TABLE_PAGE_LAYOUT_LOG_ID } from 'app/constants/error'
 import { MAX_PER_PAGE } from 'app/constants/pagination'
 import { QueryParams } from 'app/constants/query'
 import { TestIds } from 'app/constants/testIds'
-import { LayoutContext, LayoutContextValue } from 'app/context/Layout.context'
 import { cns } from 'app/utils/cns'
 
 import { ErrorBoundary } from '../ErrorBoundary'
@@ -141,93 +140,82 @@ function TablePageTabContent({
     })
   }
 
-  const contextValue = useMemo<LayoutContextValue>(
-    () => ({
-      hasFilters: !!filterPanel,
-    }),
-    [filterPanel],
-  )
-
   if (noTotalResults !== undefined && totalCount === 0) {
     return noTotalResults
   }
 
   return (
-    <LayoutContext.Provider value={contextValue}>
-      <div className="flex flex-auto">
-        {filterPanel && (
-          <div
-            className={cns(
-              'flex flex-col flex-shrink-0 w-[235px]',
-              'border-t border-r border-sds-color-primitive-gray-300',
-            )}
-          >
-            {filterPanel}
-          </div>
-        )}
-
+    <div className="flex flex-auto">
+      {filterPanel && (
         <div
           className={cns(
-            'flex flex-col flex-auto',
-            'pb-sds-xxl',
-            'border-t border-sds-color-primitive-gray-300',
-            'overflow-x-scroll max-w-full',
-            !banner && 'pt-sds-xl',
-
-            filterPanel
-              ? 'screen-2040:items-center'
-              : 'screen-1024:items-center',
+            'flex flex-col flex-shrink-0 w-[235px]',
+            'border-t border-r border-sds-color-primitive-gray-300',
           )}
         >
-          <div
-            className={cns(
-              'flex flex-col flex-auto w-full max-w-content',
+          {filterPanel}
+        </div>
+      )}
 
-              // Translate to the left by half the filter panel width to align with the header
-              filterPanel && 'screen-2040:translate-x-[-117.5px]',
+      <div
+        className={cns(
+          'flex flex-col flex-auto',
+          'pb-sds-xxl',
+          'border-t border-sds-color-primitive-gray-300',
+          'overflow-x-scroll max-w-full',
+          !banner && 'pt-sds-xl',
+
+          filterPanel ? 'screen-2040:items-center' : 'screen-1024:items-center',
+        )}
+      >
+        <div
+          className={cns(
+            'flex flex-col flex-auto w-full max-w-content',
+
+            // Translate to the left by half the filter panel width to align with the header
+            filterPanel && 'screen-2040:translate-x-[-117.5px]',
+          )}
+        >
+          {banner && <div className="flex px-sds-xl">{banner}</div>}
+
+          <Header
+            countLabel={countLabel}
+            description={description}
+            filteredCount={filteredCount}
+            learnMoreLink={learnMoreLink}
+            title={title}
+            totalCount={totalCount}
+          />
+
+          <ErrorBoundary logId={TABLE_PAGE_LAYOUT_LOG_ID}>
+            <div className="overflow-x-scroll">{table}</div>
+          </ErrorBoundary>
+
+          <div className="px-sds-xl">
+            {filteredCount === 0 && (
+              <div className="mt-[100px]">{noFilteredResults}</div>
             )}
-          >
-            {banner && <div className="flex px-sds-xl">{banner}</div>}
-
-            <Header
-              countLabel={countLabel}
-              description={description}
-              filteredCount={filteredCount}
-              learnMoreLink={learnMoreLink}
-              title={title}
-              totalCount={totalCount}
-            />
 
-            <ErrorBoundary logId={TABLE_PAGE_LAYOUT_LOG_ID}>
-              <div className="overflow-x-scroll">{table}</div>
-            </ErrorBoundary>
-
-            <div className="px-sds-xl">
-              {filteredCount === 0 && (
-                <div className="mt-[100px]">{noFilteredResults}</div>
-              )}
-
-              {filteredCount > MAX_PER_PAGE && (
-                <div
-                  className="w-full flex justify-center mt-sds-xxl"
-                  data-testid={TestIds.Pagination}
-                >
-                  <Pagination
-                    currentPage={pageQueryParamValue}
-                    pageSize={MAX_PER_PAGE}
-                    totalCount={
-                      totalCount === filteredCount ? totalCount : filteredCount
-                    }
-                    onNextPage={() => setPage(pageQueryParamValue + 1)}
-                    onPreviousPage={() => setPage(pageQueryParamValue - 1)}
-                    onPageChange={(nextPage) => setPage(nextPage)}
-                  />
-                </div>
-              )}
-            </div>
+            {filteredCount > MAX_PER_PAGE && (
+              <div
+                className="w-full flex justify-center mt-sds-xxl"
+                data-testid={TestIds.Pagination}
+              >
+                <Pagination
+                  currentPage={pageQueryParamValue}
+                  pageSize={MAX_PER_PAGE}
+                  totalCount={
+                    totalCount === filteredCount ? totalCount : filteredCount
+                  }
+                  onNextPage={() => setPage(pageQueryParamValue + 1)}
+                  onPreviousPage={() => setPage(pageQueryParamValue - 1)}
+                  onPageChange={(nextPage) => setPage(nextPage)}
+                />
+              </div>
+            )}
           </div>
         </div>
       </div>
-    </LayoutContext.Provider>
+    </div>
   )
 }
diff --git a/frontend/packages/data-portal/app/context/Layout.context.ts b/frontend/packages/data-portal/app/context/Layout.context.ts