random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-02-01 13:46:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix table coming off its container with unwanted horizontal scrollbar

Browse Source
This commit is contained in:
Laurent Nguyen 2024-04-23 11:04:35 +02:00
parent 86926f2d7b
commit 49a9f4d596
1 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@ -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 && (