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

Fix table size issue with some heuristics

Browse Source
This commit is contained in:
Laurent Nguyen 2024-07-10 19:14:13 +02:00
parent fa460bfba2
commit 5d59c47979
2 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -447,6 +447,9 @@ export interface IDocumentsTabComponentProps {
// Extend DocumentId to include fields displayed in the table // Extend DocumentId to include fields displayed in the table
type ExtendedDocumentId = DocumentId & { tableFields?: DocumentsTableComponentItem }; 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 to expose to unit tests
export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabComponentProps> = ({ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabComponentProps> = ({
isPreferredApiMongoDB, isPreferredApiMongoDB,
@ -1901,7 +1904,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
style={ style={
{ {
height: "100%", height: "100%",
width: "calc(100% - 50px)", width: `calc(100% + ${calculateOffset(selectedColumnIds.length)}px)`,
} /* Fix to make table not resize beyond parent's width */ } /* Fix to make table not resize beyond parent's width */
} }
> >

2
src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
View File

@ -147,7 +147,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
aria-label="Select column" aria-label="Select column"
size="small" size="small"
icon={<MoreHorizontalRegular />} icon={<MoreHorizontalRegular />}
style={{ position: "absolute", right: -6 }} style={{ position: "absolute", right: 0 }}
/> />
</MenuTrigger> </MenuTrigger>
<MenuPopover> <MenuPopover>