feat: wp

.storybook/manager.css

@@ -0,0 +1,4 @@
+#storybook-root {
+    width: 100% !important;
+  }
+

.storybook/preview.css

@@ -0,0 +1,3 @@
+#storybook-root, .sb-show-main {
+  width: 100% !important;
+}

.storybook/preview.tsx

@@ -4,6 +4,7 @@ import type { Preview } from '@storybook/react';
 import React from 'react';
 
 import { system } from '../src/ui/theme/theme';
+import './preview.css'
 
 const preview: Preview = {
   parameters: {
@@ -18,7 +19,7 @@ const preview: Preview = {
   decorators: [
     Story => (
       <ChakraProvider value={system}>
-        <Story />
+        <Story w='100%' className='preview-story'/>
       </ChakraProvider>
     ),
     withThemeByClassName({

src/common/components/table/Table.tsx

@@ -18,7 +18,16 @@ const fixedFirstColumnCss = {
     top: 0,
     width: '2px',
     height: 'full',
-    backgroundColor: 'newBorderPrimary',
+    backgroundColor: 'redesignBorderPrimary',
+  },
+  '.has-horizontal-scroll &:first-of-type::before': {
+    content: '""',
+    position: 'absolute',
+    right: 0,
+    width: '2px',
+    backgroundColor: 'redesignBorderPrimary',
+    top: '-8px', // Accounts for gap between header rows and the other rows
+    height: 'calc(calc(100%) + 8px)',
   },
   '&': {
     position: 'sticky',
@@ -91,6 +100,7 @@ export function TableHeader<R, V = R[keyof R]>({
   setSortColumnId,
   setSortOrder,
   hasFixedFirstColumn,
+  numColumns,
 }: {
   sortColumn?: string | null;
   sortOrder?: SortOrder;
@@ -100,12 +110,13 @@ export function TableHeader<R, V = R[keyof R]>({
   setSortColumnId: (columnId: string) => void;
   setSortOrder: (sortOrder: SortOrder | undefined) => void;
   hasFixedFirstColumn?: boolean;
+  numColumns: number;
 }) {
   const isFirstColumn = columnIndex === 0;
   return (
     <ChakraTable.ColumnHeader
       py={3}
-      px={6}
+      px={[2, 2, 2, `clamp(12px, calc(48px / ${numColumns}), 16px)`]}
       border="none"
       borderBottom="1px solid var(--stacks-colors-surface-secondary)"
       css={hasFixedFirstColumn && isFirstColumn ? fixedFirstColumnCss : {}}
@@ -133,18 +144,18 @@ export function TableHeader<R, V = R[keyof R]>({
             whiteSpace="nowrap"
             fontSize="sm"
             color={{
-            _light: 'slate.700',
-            _dark: 'slate.250',
-          }}
-          textTransform="none"
-          letterSpacing="normal"
-          fontFamily="instrument"
-          css={{
-            '& .column-header-content:hover': {
-              color: 'textPrimary',
-            },
-          }}
-        >
+              _light: 'slate.700',
+              _dark: 'slate.250',
+            }}
+            textTransform="none"
+            letterSpacing="normal"
+            fontFamily="instrument"
+            css={{
+              '& .column-header-content:hover': {
+                color: 'textPrimary',
+              },
+            }}
+          >
             {headerTitle}
           </Text>
         ) : (
@@ -201,8 +212,8 @@ export function TableRow<R, V = R[keyof R]>({
         return (
           <ChakraTable.Cell
             key={`table-row-${rowIndex}-col-${colIndex}`}
-            py={4}
-            px={6}
+            py={3}
+            px={[2, 2, 2, `clamp(12px, calc(48px / ${columnDefinitions.length}), 16px)`]}
             css={{
               ...(hasFixedFirstColumn && isFirstColumn
                 ? {
@@ -342,6 +353,7 @@ export function Table<R>({
         },
       }}
       overflowX="auto"
+      className="table-root"
     >
       <ChakraTable.Header>
         <ChakraTable.Row>
@@ -356,6 +368,7 @@ export function Table<R>({
               setSortOrder={setSortOrder}
               columnIndex={colIndex}
               hasFixedFirstColumn={hasFixedFirstColumn}
+              numColumns={columnDefinitions.length}
             />
           ))}
         </ChakraTable.Row>

src/common/components/table/TableContainer.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, FlexProps, Stack } from '@chakra-ui/react';
+import { Flex, FlexProps, Stack } from '@chakra-ui/react';
 import { ReactNode } from 'react';
 
 import { Text } from '../../../ui/Text';
@@ -61,10 +61,18 @@ export function TableContainer({
   ...rest
 }: TableContainerProps) {
   return (
-    <Stack gap={7} w="fit-content">
+    <Stack gap={7} w="full" className="table-container">
       <Toolbar topLeft={topLeft} topRight={topRight} title={title} />
-      <Card h="fit-content" w="full" p={[3, 3, 4]} {...rest}>
-        <Box position={'relative'}>{children}</Box>
+      <Card
+        h="fit-content"
+        w="full"
+        p={[3, 3, 3, 4]}
+        borderColor="red"
+        className="table-container-card"
+         overflow='auto'
+        {...rest}
+      >
+        {children}
       </Card>
     </Stack>
   );

src/common/components/table/TableScrollIndicatorWrapper.tsx

@@ -37,7 +37,7 @@ export function ScrollIndicatorWrapper({ children, ...rest }: BoxProps & { child
   }, []);
 
   return (
-    <Box position="relative">
+    <Box position="relative" className='scroll-indicator-positioner'>
       <Box
         ref={divRef}
         overflowX={'auto'}

src/stories/Table.stories.tsx

@@ -101,49 +101,70 @@ const meta: Meta<TableStoryArgs> = {
       placeholder: 'Enter height (e.g., 500px)',
     },
   },
-  decorators: [
-    (Story, { args }) => {
-      const [size, setSize] = useState({
-        width: args.containerWidth,
-        height: args.containerHeight,
-      });
-      const containerRef = useRef<HTMLDivElement>(null);
+  // decorators: [
+  //   (Story, { args }) => {
+  //     const [size, setSize] = useState({
+  //       width: args.containerWidth,
+  //       height: args.containerHeight,
+  //     });
+  //     const containerRef = useRef<HTMLDivElement>(null);
 
-      useEffect(() => {
-        const observer = new ResizeObserver(entries => {
-          const entry = entries[0];
-          if (entry) {
-            setSize({
-              width: Math.round(parseFloat(entry.contentRect.width.toString())).toString(),
-              height: Math.round(parseFloat(entry.contentRect.height.toString())).toString(),
-            });
-          }
-        });
+  //     useEffect(() => {
+  //       const observer = new ResizeObserver(entries => {
+  //         const entry = entries[0];
+  //         if (entry) {
+  //           setSize({
+  //             width: Math.round(parseFloat(entry.contentRect.width.toString())).toString(),
+  //             height: Math.round(parseFloat(entry.contentRect.height.toString())).toString(),
+  //           });
+  //         }
+  //       });
 
-        if (containerRef.current) {
-          observer.observe(containerRef.current);
-        }
+  //       if (containerRef.current) {
+  //         observer.observe(containerRef.current);
+  //       }
 
-        return () => observer.disconnect();
-      }, []);
+  //       return () => observer.disconnect();
+  //     }, []);
 
+  //     return (
+  //       <Box
+  //         ref={containerRef}
+  //         w={size.width}
+  //         h={size.height}
+  //         bg="gray.50"
+  //         overflow="hidden"
+  //         border="1px solid"
+  //         borderColor="redesignBorderPrimary"
+  //         resize="both" // Makes this container resizable
+  //         // style={{ maxWidth: '100%' }} // Makes this container resizable
+  //       >
+  //         <Stack p={10} gap={2}>
+  //           <Text fontSize="sm" color="gray.600">
+  //             Size: {size.width}px × {size.height}px
+  //           </Text>
+  //           <Story />
+  //         </Stack>
+  //       </Box>
+  //     );
+  //   },
+  // ],
+  decorators: [
+    (Story, { args }) => {
       return (
         <Box
-          ref={containerRef}
-          w={size.width}
-          h={size.height}
+          w={'full'}
+          h={'full'}
           bg="gray.50"
           overflow="hidden"
           border="1px solid"
           borderColor="redesignBorderPrimary"
-          resize="both" // Makes this container resizable
+          // resize="both" // Makes this container resizable
           // style={{ maxWidth: '100%' }} // Makes this container resizable
+          className='not-story-book-root'
         >
           <Stack p={10} gap={2}>
-            <Text fontSize="sm" color="gray.600">
-              Size: {size.width}px × {size.height}px
-            </Text>
-            <Story />
+            <Story w='full'/>
           </Stack>
         </Box>
       );