chore: fix border issue (#474)

qlik-oss · Nov 22, 2023 · c561a0c · c561a0c
1 parent df87a57
commit c561a0c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/src/pivot-table/components/PivotTable.tsx b/src/pivot-table/components/PivotTable.tsx
@@ -153,8 +153,8 @@ export const StickyPivotTable = ({
               showHorizontalScrollbar
               origin={ScrollableContainerOrigin.LEFT_GRID}
             >
-              <FullSizeContainer {...leftWrapper.containers.fullSize}>
-                <StickyContainer {...leftWrapper.containers.sticky}>
+              <FullSizeContainer isLeftGrid {...leftWrapper.containers.fullSize}>
+                <StickyContainer isLeftGrid {...leftWrapper.containers.sticky}>
                   <HeaderGrid
                     dataModel={dataModel}
                     columnWidths={leftGridColumnWidths}

diff --git a/src/pivot-table/components/containers/FullSizeContainer.tsx b/src/pivot-table/components/containers/FullSizeContainer.tsx
@@ -5,16 +5,17 @@ interface FullSizeContainerProps {
   width: number;
   height: number;
   children: JSX.Element;
+  isLeftGrid?: boolean;
 }
 
-const FullSizeContainer = ({ width, height, children }: FullSizeContainerProps): JSX.Element => (
+const FullSizeContainer = ({ width, height, children, isLeftGrid }: FullSizeContainerProps): JSX.Element => (
   <div
     data-testid="full-size-container"
     style={{
       display: "block",
       // GRID_BORDER is added because there is a border between the different grids.
       // Otherwise the react-window components will not scroll to the end (off by 1 pixel).
-      width,
+      width: isLeftGrid ? "fit-content" : width,
       height: height + GRID_BORDER,
     }}
   >

diff --git a/src/pivot-table/components/containers/StickyContainer.tsx b/src/pivot-table/components/containers/StickyContainer.tsx
@@ -5,16 +5,17 @@ interface StickyContainerProps {
   height: number;
   children: ReactNode;
   style?: React.CSSProperties;
+  isLeftGrid?: boolean;
 }
 
-const StickyContainer = ({ width, height, children, style }: StickyContainerProps): JSX.Element => (
+const StickyContainer = ({ width, height, children, style, isLeftGrid }: StickyContainerProps): JSX.Element => (
   <div
     data-testid="sticky-container"
     style={{
       position: "sticky",
       top: 0,
       left: 0,
-      width,
+      width: isLeftGrid ? "fit-content" : width,
       height,
       ...style,
     }}