From 49a9f4d5961079071c03f5567b24c89828b4b4a0 Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Tue, 23 Apr 2024 11:04:35 +0200
Subject: [PATCH] Fix table coming off its container with unwanted horizontal
 scrollbar

---
 .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx    | 63 ++++++++++---------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index 3dd6ceb30..35e711f83 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -1457,12 +1457,12 @@ const DocumentsTabComponent: React.FunctionComponent<{
       <div
         className="tab-pane active"
         /* data-bind="
-            setTemplateReady: true,
-            attr:{
-                id: tabId
-            },
-            visible: isActive"
-            */
+                setTemplateReady: true,
+                attr:{
+                    id: tabId
+                },
+                visible: isActive"
+                */
         role="tabpanel"
         style={{ display: "flex" }}
       >
@@ -1551,9 +1551,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
                         onClick={() => refreshDocumentsGrid(true)}
                         disabled={!applyFilterButton.enabled}
                         /* data-bind="
-                                        click: refreshDocumentsGrid.bind($data, true),
-                                        enable: applyFilterButton.enabled"
-                              */
+                                            click: refreshDocumentsGrid.bind($data, true),
+                                            enable: applyFilterButton.enabled"
+                                  */
                         aria-label="Apply filter"
                         tabIndex={0}
                       >
@@ -1565,9 +1565,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
                         <button
                           className="filterbtnstyle queryButton"
                           /* data-bind="
-                                          visible: !isPreferredApiMongoDB && isExecuting,
-                                          click: onAbortQueryClick"
-                                */
+                                              visible: !isPreferredApiMongoDB && isExecuting,
+                                              click: onAbortQueryClick"
+                                    */
                           aria-label="Cancel Query"
                           tabIndex={0}
                         >
@@ -1599,24 +1599,27 @@ const DocumentsTabComponent: React.FunctionComponent<{
         <div style={{ overflow: "hidden", height: "100%" }}>
           <Split>
             <div style={{ minWidth: 200, width: "20%" }} ref={tableContainerRef}>
-              <DocumentsTableComponent
-                style={{ width: 200 }}
-                items={tableItems}
-                onItemClicked={onDocumentClicked}
-                onSelectedRowsChange={onSelectedRowsChange}
-                selectedRows={selectedRows}
-                size={tableContainerSizePx}
-                columnHeaders={columnHeaders}
-                onRefreshClicked={refreshDocumentsGrid}
-              />
-              <a
-                className="loadMore"
-                role="button"
-                onClick={() => loadNextPage(false)}
-                onKeyDown={() => loadNextPage(false)}
-              >
-                Load more
-              </a>
+              <div style={{ height: "100%", width: "calc(100% - 50px)" }}>
+                {" "}
+                {/* Fix to make table not resize beyond parent's width */}
+                <DocumentsTableComponent
+                  items={tableItems}
+                  onItemClicked={onDocumentClicked}
+                  onSelectedRowsChange={onSelectedRowsChange}
+                  selectedRows={selectedRows}
+                  size={tableContainerSizePx}
+                  columnHeaders={columnHeaders}
+                  onRefreshClicked={refreshDocumentsGrid}
+                />
+                <a
+                  className="loadMore"
+                  role="button"
+                  onClick={() => loadNextPage(false)}
+                  onKeyDown={() => loadNextPage(false)}
+                >
+                  Load more
+                </a>
+              </div>
             </div>
             <div style={{ minWidth: "20%", width: "100%" }}>
               {selectedDocumentContent && selectedRows.size <= 1 && (