From c561a0c2ffb41368edd0c1f0ea704ea55946bf99 Mon Sep 17 00:00:00 2001
From: Ahmad Mirzaei <a.mirzaei.dev@gmail.com>
Date: Wed, 22 Nov 2023 13:50:23 +0100
Subject: [PATCH] chore: fix border issue (#474)

---
 src/pivot-table/components/PivotTable.tsx                   | 4 ++--
 src/pivot-table/components/containers/FullSizeContainer.tsx | 5 +++--
 src/pivot-table/components/containers/StickyContainer.tsx   | 5 +++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/pivot-table/components/PivotTable.tsx b/src/pivot-table/components/PivotTable.tsx
index cd544897..f2d5cdcf 100644
--- 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
index 72cde9c8..f8c1e84a 100644
--- 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
index 9d190104..75a64db8 100644
--- 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,
     }}