From 5d59c47979c49e3a2d046c9a749e00e5bb4a861d Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Wed, 10 Jul 2024 19:14:13 +0200
Subject: [PATCH] Fix table size issue with some heuristics

---
 src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx          | 5 ++++-
 src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index d5491fb71..6aa69e108 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -447,6 +447,9 @@ export interface IDocumentsTabComponentProps {
 // Extend DocumentId to include fields displayed in the table
 type ExtendedDocumentId = DocumentId & { tableFields?: DocumentsTableComponentItem };
 
+// This is based on some heuristics
+const calculateOffset = (columnNumber: number): number => columnNumber * 13.71428571 - 46;
+
 // Export to expose to unit tests
 export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabComponentProps> = ({
   isPreferredApiMongoDB,
@@ -1901,7 +1904,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                 style={
                   {
                     height: "100%",
-                    width: "calc(100% - 50px)",
+                    width: `calc(100% + ${calculateOffset(selectedColumnIds.length)}px)`,
                   } /* Fix to make table not resize beyond parent's width */
                 }
               >
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
index b7ce7afe3..32aa19954 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -147,7 +147,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
                     aria-label="Select column"
                     size="small"
                     icon={<MoreHorizontalRegular />}
-                    style={{ position: "absolute", right: -6 }}
+                    style={{ position: "absolute", right: 0 }}
                   />
                 </MenuTrigger>
                 <MenuPopover>