feat(sanity): enable full-bleed tables

sanity-io · Oct 16, 2024 · fbe84f1 · fbe84f1
1 parent 1ae631d
commit fbe84f1
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 45 deletions.
diff --git a/packages/sanity/src/core/releases/tool/components/Table/Table.tsx b/packages/sanity/src/core/releases/tool/components/Table/Table.tsx
@@ -1,4 +1,4 @@
-import {Box, Card, type CardProps, Container, Flex, Stack, Text} from '@sanity/ui'
+import {Box, Card, type CardProps, Flex, rem, Stack, Text, useTheme} from '@sanity/ui'
 import {
   defaultRangeExtractor,
   type Range,
@@ -7,6 +7,7 @@ import {
 } from '@tanstack/react-virtual'
 import {get} from 'lodash'
 import {
+  type CSSProperties,
   Fragment,
   type HTMLProps,
   type MutableRefObject,
@@ -182,6 +183,10 @@ const TableInner = <TableData, AdditionalRowTableData>({
             style={{
               height: `${datum.virtualRow.size}px`,
               transform: `translateY(${datum.virtualRow.start - datum.index * datum.virtualRow.size}px)`,
+              paddingInline: `max(
+                calc((100vw - var(--maxInlineSize)) / 2),
+                var(--paddingInline)
+              )`,
             }}
             {...cardRowProps}
           >
@@ -231,40 +236,44 @@ const TableInner = <TableData, AdditionalRowTableData>({
     [amalgamatedColumnDefs],
   )
 
+  const theme = useTheme()
+
   if (loading) {
     return <LoadingBlock fill data-testid="table-loading" />
   }
 
   return (
     <div ref={virtualizerContainerRef}>
       <div
-        style={{
-          height: `${rowVirtualizer.getTotalSize()}px`,
-          // The padding accounts for the height of the <TableHeader> and extra space for padding at the bottom
-          paddingBottom: '110px',
-          width: '100%',
-          position: 'relative',
-        }}
+        style={
+          {
+            'height': `${rowVirtualizer.getTotalSize()}px`,
+            // The padding accounts for the height of the <TableHeader> and extra space for padding at the bottom
+            'paddingBottom': '110px',
+            'width': '100%',
+            'position': 'relative',
+            '--maxInlineSize': rem(theme.sanity.v2?.container[3] ?? 0),
+            '--paddingInline': rem(theme.sanity.v2?.space[3] ?? 0),
+          } as CSSProperties
+        }
       >
-        <Container width={3} paddingX={3}>
-          <Stack as="table">
-            <TableHeader headers={headers} searchDisabled={!searchTerm && !data.length} />
-            <Stack as="tbody">
-              {filteredData.length === 0
-                ? emptyContent
-                : rowVirtualizer.getVirtualItems().map((virtualRow, index) => {
-                    const datum = filteredData[virtualRow.index]
-                    return renderRow({
-                      ...datum,
-                      virtualRow,
-                      index,
-                      isFirst: virtualRow.index === 0,
-                      isLast: virtualRow.index === filteredData.length - 1,
-                    })
-                  })}
-            </Stack>
+        <Stack as="table">
+          <TableHeader headers={headers} searchDisabled={!searchTerm && !data.length} />
+          <Stack as="tbody">
+            {filteredData.length === 0
+              ? emptyContent
+              : rowVirtualizer.getVirtualItems().map((virtualRow, index) => {
+                  const datum = filteredData[virtualRow.index]
+                  return renderRow({
+                    ...datum,
+                    virtualRow,
+                    index,
+                    isFirst: virtualRow.index === 0,
+                    isLast: virtualRow.index === filteredData.length - 1,
+                  })
+                })}
           </Stack>
-        </Container>
+        </Stack>
       </div>
     </div>
   )

diff --git a/packages/sanity/src/core/releases/tool/components/Table/TableHeader.tsx b/packages/sanity/src/core/releases/tool/components/Table/TableHeader.tsx
@@ -58,7 +58,15 @@ const TableHeaderSearch = ({
 export const TableHeader = ({headers, searchDisabled}: TableHeaderProps) => {
   return (
     <Card as="thead" borderTop borderBottom>
-      <Flex as="tr">
+      <Flex
+        as="tr"
+        style={{
+          paddingInline: `max(
+          calc((100vw - var(--maxInlineSize)) / 2),
+          var(--paddingInline)
+        )`,
+        }}
+      >
         {headers.map(({header: Header, width, id, sorting}) => (
           <Header
             key={String(id)}

diff --git a/packages/sanity/src/core/releases/tool/overview/ReleasesOverview.tsx b/packages/sanity/src/core/releases/tool/overview/ReleasesOverview.tsx
@@ -171,7 +171,7 @@ export function ReleasesOverview() {
 
   return (
     <Flex paddingX={4} height="fill" direction="column" ref={scrollContainerRef} overflow={'auto'}>
-      <Container width={2} paddingY={6}>
+      <Container width={3} paddingY={6}>
         <Flex align="flex-start" gap={2} paddingBottom={2}>
           <Flex align="flex-start" flex={1} gap={4}>
             <Stack paddingY={1} space={4}>
@@ -193,24 +193,24 @@ export function ReleasesOverview() {
           </Flex>
           {loadingOrHasBundles && createReleaseButton}
         </Flex>
-        {(hasBundles || loadingTableData) && (
-          <Table<TableBundle>
-            // for resetting filter and sort on table when mode changed
-            key={bundleGroupMode}
-            defaultSort={DEFAULT_RELEASES_OVERVIEW_SORT}
-            loading={loadingTableData}
-            data={groupedBundles[bundleGroupMode]}
-            columnDefs={releasesOverviewColumnDefs(t)}
-            searchFilter={applySearchTermToBundles}
-            emptyState={t('no-releases')}
-            // eslint-disable-next-line @sanity/i18n/no-attribute-string-literals
-            rowId="_id"
-            rowActions={renderRowActions}
-            rowProps={getRowProps}
-            scrollContainerRef={scrollContainerRef}
-          />
-        )}
       </Container>
+      {(hasBundles || loadingTableData) && (
+        <Table<TableBundle>
+          // for resetting filter and sort on table when mode changed
+          key={bundleGroupMode}
+          defaultSort={DEFAULT_RELEASES_OVERVIEW_SORT}
+          loading={loadingTableData}
+          data={groupedBundles[bundleGroupMode]}
+          columnDefs={releasesOverviewColumnDefs(t)}
+          searchFilter={applySearchTermToBundles}
+          emptyState={t('no-releases')}
+          // eslint-disable-next-line @sanity/i18n/no-attribute-string-literals
+          rowId="_id"
+          rowActions={renderRowActions}
+          rowProps={getRowProps}
+          scrollContainerRef={scrollContainerRef}
+        />
+      )}
       {renderCreateBundleDialog()}
     </Flex>
   )