Add dynamic width of SelectEnsemblesDialog

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 };
 }

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 {
                     </QueryStateWrapper>
                 </Label>
                 <div className="grow flex flex-row gap-4 items-center">
-                    <Label position="left" text="Show my cases only">
-                        <Tooltip title="Show only my cases" enterDelay="medium">
+                    <Label position="left" text="Only my cases">
+                        <Tooltip title="Show only cases authored by me" enterDelay="medium">
                             <Switch checked={showOnlyMyCases} onChange={handleCasesByMeChange} />
                         </Tooltip>
                     </Label>
-                    <Label position="left" text="Show official cases only">
+                    <Label position="left" text="Only official cases">
                         <Tooltip title="Show only cases marked as official" enterDelay="medium">
                             <Switch checked={showOnlyOfficialCases} onChange={handleOfficialCasesSwitchChange} />
                         </Tooltip>
                     </Label>
                     <QueryStateWrapper
                         queryResult={casesQuery}
-                        className="h-full flex-1 min-h-0"
+                        className="h-full flex-1 min-h-0 min-w-56"
                         errorComponent={<div className="text-red-500">Error loading cases</div>}
                         loadingComponent={<CircularProgress />}
                     >
-                        <TagPicker
-                            className="bg-white"
-                            placeholder="Filter cases by Standard Results..."
-                            selection={selectedStandardResults}
-                            tagOptions={casesStandardResults.map((elm) => ({ label: elm, value: elm }))}
-                            onChange={(value) => setSelectedStandardResults([...value])}
-                        />
+                        <Tooltip title="Filter cases by selected Standard Results" enterDelay="medium">
+                            <TagPicker
+                                className="bg-white"
+                                placeholder="Filter cases by Standard Results..."
+                                selection={selectedStandardResults}
+                                tagOptions={casesStandardResults.map((elm) => ({ label: elm, value: elm }))}
+                                onChange={(value) => setSelectedStandardResults([...value])}
+                            />
+                        </Tooltip>
                     </QueryStateWrapper>
                 </div>
             </div>

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<SelectEnsemblesDialogProps> = (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<SelectEnsemblesDialogProps> = (prop
     }, [showEnsembleExplorer, ensembleExplorerMode]);
 
     const hasAnyChanges = hash !== currentHash;
+
     return (
         <>
             <Dialog
@@ -367,9 +368,10 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                 title={dialogTitle}
                 modal
                 showCloseCross
-                width={"75%"}
+                width={`${dialogSizePercent.width}%`}
+                height={`${dialogSizePercent.height}%`}
+                maxWidth={"100%"}
                 minWidth={800}
-                height={`${dialogHeightPercent}%`}
                 minHeight={600}
                 actions={
                     <div className="flex gap-4">

frontend/src/lib/components/Dialog/dialog.tsx

@@ -21,6 +21,8 @@ export type DialogProps = {
     onClose?: (e: React.MouseEvent<HTMLDivElement, 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<DialogProps> = (props) => {
             {/* Main dialog */}
             <div
                 ref={dialogRef}
-                className={
-                    "fixed left-1/2 top-1/2 border rounded-sm bg-white shadow-sm min-w-lg max-w-[75vw] pointer-events-auto flex flex-col overflow-hidden"
-                }
+                className={resolveClassNames(
+                    "fixed left-1/2 top-1/2 border rounded-sm bg-white shadow-sm min-w-lg max-w-[75vw] pointer-events-auto flex flex-col overflow-hidden",
+                )}
                 style={{
                     transform: `translate(-50%, -50%)`,
                     height: props.height,
                     width: props.width,
                     minWidth: props.minWidth,
                     minHeight: props.minHeight,
+                    maxWidth: props.maxWidth,
+                    maxHeight: props.maxHeight,
                 }}
             >
                 {/* Header */}