fix #1796

QCDIS · Jan 27, 2025 · efa6382 · efa6382
1 parent 561d666
commit efa6382
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/packages/components/src/VirtualizedList.tsx b/packages/components/src/VirtualizedList.tsx
@@ -4,6 +4,7 @@ import Box from '@mui/material/Box';
 import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
+import { SxProps } from '@mui/material';
 
 function Row(
   {
@@ -38,13 +39,12 @@ function Row(
 interface VirtualizedListProps {
   clickAction: (index: number) => void;
   items: [];
+  sx: SxProps;
 }
 
-export function VirtualizedList({ items, clickAction }: VirtualizedListProps) {
+export function VirtualizedList({ items, clickAction, sx }: VirtualizedListProps) {
   return (
-    <Box
-      sx={{ width: '100%', height: '100%', maxWidth: 360, bgcolor: 'background.paper', overflow: 'scroll' }}
-    >
+    <Box sx={sx}>
       {items.map((item, index) => (
         <Row
           key={item['node_id']}

diff --git a/packages/experiment-manager/src/components/CatalogDialog.tsx b/packages/experiment-manager/src/components/CatalogDialog.tsx
@@ -95,12 +95,23 @@ export class CatalogDialog extends React.Component<CatalogDialogProps> {
                             disablePortal
                             id="combo-box-demo"
                             options={catalogs}
-                            sx={{ width: 300, margin: '10px' }}
+                            sx={{
+                                width: 300,
+                                margin: '10px',
+                                height: '50px',
+                            }}
                             renderInput={(params) => <TextField {...params} label="Catalog" />}
                         />
                         <VirtualizedList
                             items={this.state.catalog_elements}
                             clickAction={this.onCellSelection}
+                            sx={{
+                                width: '100%',
+                                height: 'calc(100% - 70px)',
+                                maxWidth: 360,
+                                bgcolor: 'background.paper',
+                                overflow: 'scroll',
+                            }}
                         />
                     </div>
                     <PreviewWindow>