From dfe95c5803a4e060b252dfa1b3d8cecccfec1865 Mon Sep 17 00:00:00 2001 From: jorgenherje Date: Thu, 23 Oct 2025 14:53:54 +0200 Subject: [PATCH] Add dynamic width of SelectEnsemblesDialog - Add dialog width calc to hook, as done for heigh - Add optional max width/heigh props to Dialog-component - Set standard result picker minWidth - Reduce label text to reduce space --- .../SelectEnsemblesDialog/_hooks.ts | 30 ++++++++++++++----- .../CaseExplorer/CaseExplorer.tsx | 25 ++++++++-------- .../selectEnsemblesDialog.tsx | 10 ++++--- frontend/src/lib/components/Dialog/dialog.tsx | 10 +++++-- 4 files changed, 48 insertions(+), 27 deletions(-) diff --git a/frontend/src/framework/internal/components/SelectEnsemblesDialog/_hooks.ts b/frontend/src/framework/internal/components/SelectEnsemblesDialog/_hooks.ts index 0f5fd5014..3aa8bb6e4 100644 --- a/frontend/src/framework/internal/components/SelectEnsemblesDialog/_hooks.ts +++ b/frontend/src/framework/internal/components/SelectEnsemblesDialog/_hooks.ts @@ -1,22 +1,36 @@ import React from "react"; -export function useResponsiveDialogHeightPercent() { +export function useResponsiveDialogSizePercent(): { width: number; height: number } { + const [dialogWidthPercent, setDialogWidthPercent] = React.useState(0); const [dialogHeightPercent, setDialogHeightPercent] = React.useState(0); React.useLayoutEffect(() => { - // Calculate dialog height percentage based on window size - // - Use full height for small windows, standard 75% for larger ones - // - When window height is between 750px and 1000px, transition dialog height from 75% to 100% + // Calculate dialog width and height percentage based on window size + // - Width: + // - Use full width for small windows, standard 75% for larger ones + // - When window width is between 900px and 1200px, transition dialog width from 75% to 100% + // - Height: + // - Use full height for small windows, standard 75% for larger ones + // - When window height is between 750px and 1000px, transition dialog height from 75% to 100% + const standardDialogWidthPercent = 75; + const pxWidthAtStandardDialog = 1600; + const pxWidthAtFullDialog = (standardDialogWidthPercent / 100) * pxWidthAtStandardDialog; + const standardDialogHeightPercent = 75; const pxHeightAtStandardDialog = 1000; const pxHeightAtFullDialog = (standardDialogHeightPercent / 100) * pxHeightAtStandardDialog; function handleResize() { - let percent = standardDialogHeightPercent; + let widthPercent = standardDialogWidthPercent; + let heightPercent = standardDialogHeightPercent; + if (window.innerWidth < pxWidthAtStandardDialog) { + widthPercent = Math.min(100, Math.round((pxWidthAtFullDialog / window.innerWidth) * 100)); + } if (window.innerHeight < pxHeightAtStandardDialog) { - percent = Math.min(100, Math.round((pxHeightAtFullDialog / window.innerHeight) * 100)); + heightPercent = Math.min(100, Math.round((pxHeightAtFullDialog / window.innerHeight) * 100)); } - setDialogHeightPercent(percent); + setDialogWidthPercent(widthPercent); + setDialogHeightPercent(heightPercent); } // Initialize immediately @@ -28,5 +42,5 @@ export function useResponsiveDialogHeightPercent() { }; }, []); - return dialogHeightPercent; + return { width: dialogWidthPercent, height: dialogHeightPercent }; } diff --git a/frontend/src/framework/internal/components/SelectEnsemblesDialog/private-components/CaseExplorer/CaseExplorer.tsx b/frontend/src/framework/internal/components/SelectEnsemblesDialog/private-components/CaseExplorer/CaseExplorer.tsx index ac5a39004..1dd52e655 100644 --- a/frontend/src/framework/internal/components/SelectEnsemblesDialog/private-components/CaseExplorer/CaseExplorer.tsx +++ b/frontend/src/framework/internal/components/SelectEnsemblesDialog/private-components/CaseExplorer/CaseExplorer.tsx @@ -19,7 +19,6 @@ import { Tooltip } from "@lib/components/Tooltip"; import { useValidArrayState } from "@lib/hooks/useValidArrayState"; import { useValidState } from "@lib/hooks/useValidState"; - import { makeCaseRowData, makeCaseTableColumns, @@ -226,29 +225,31 @@ export function CaseExplorer(props: CaseExplorerProps): React.ReactNode {
-
} loadingComponent={} > - ({ label: elm, value: elm }))} - onChange={(value) => setSelectedStandardResults([...value])} - /> + + ({ label: elm, value: elm }))} + onChange={(value) => setSelectedStandardResults([...value])} + /> + diff --git a/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx b/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx index 66a58976e..89a1ca238 100644 --- a/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx +++ b/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx @@ -16,7 +16,7 @@ import { usePublishSubscribeTopicValue } from "@lib/utils/PublishSubscribeDelega import { LoadingOverlay } from "../LoadingOverlay"; -import { useResponsiveDialogHeightPercent } from "./_hooks"; +import { useResponsiveDialogSizePercent } from "./_hooks"; import { makeDeltaEnsembleSettingsFromEnsembleSet, makeHashFromDeltaEnsemble, @@ -68,7 +68,7 @@ export const SelectEnsemblesDialog: React.FC = (prop PrivateWorkbenchSessionTopic.IS_ENSEMBLE_SET_LOADING, ); - const dialogHeightPercent = useResponsiveDialogHeightPercent(); + const dialogSizePercent = useResponsiveDialogSizePercent(); const colorSet = useColorSet(props.workbench.getWorkbenchSession().getWorkbenchSettings()); const currentHash = makeHashFromSelectedEnsembles(selectedRegularEnsembles, selectedDeltaEnsembles); @@ -359,6 +359,7 @@ export const SelectEnsemblesDialog: React.FC = (prop }, [showEnsembleExplorer, ensembleExplorerMode]); const hasAnyChanges = hash !== currentHash; + return ( <> = (prop title={dialogTitle} modal showCloseCross - width={"75%"} + width={`${dialogSizePercent.width}%`} + height={`${dialogSizePercent.height}%`} + maxWidth={"100%"} minWidth={800} - height={`${dialogHeightPercent}%`} minHeight={600} actions={
diff --git a/frontend/src/lib/components/Dialog/dialog.tsx b/frontend/src/lib/components/Dialog/dialog.tsx index b0982da25..e49198f98 100644 --- a/frontend/src/lib/components/Dialog/dialog.tsx +++ b/frontend/src/lib/components/Dialog/dialog.tsx @@ -21,6 +21,8 @@ export type DialogProps = { onClose?: (e: React.MouseEvent) => void; width?: string | number; height?: string | number; + maxWidth?: string | number; + maxHeight?: string | number; minWidth?: string | number; minHeight?: string | number; actions?: React.ReactNode; @@ -56,15 +58,17 @@ export const Dialog: React.FC = (props) => { {/* Main dialog */}
{/* Header */}