diff --git a/packages/selection/frontend/sirius-components-selection/src/SelectionDialog.tsx b/packages/selection/frontend/sirius-components-selection/src/SelectionDialog.tsx index 0be4e285ef6..4bdd599d349 100644 --- a/packages/selection/frontend/sirius-components-selection/src/SelectionDialog.tsx +++ b/packages/selection/frontend/sirius-components-selection/src/SelectionDialog.tsx @@ -22,11 +22,21 @@ import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; import IconButton from '@mui/material/IconButton'; import { useEffect, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { DiagramDialogComponentState } from './SelectionDialog.types'; import { useSelectionDescription } from './useSelectionDescription'; export const SELECTION_DIALOG_TYPE: string = 'selectionDialogDescription'; +const useTreeStyle = makeStyles()((theme) => ({ + borderStyle: { + border: '1px solid', + borderColor: theme.palette.grey[500], + height: 300, + overflow: 'auto', + }, +})); + export const SelectionDialog = ({ editingContextId, dialogDescriptionId, @@ -39,6 +49,7 @@ export const SelectionDialog = ({ message: '', selectedObjects: [], }; + const { classes } = useTreeStyle(); const [state, setState] = useState(initialState); const { loading, selectionDescription } = useSelectionDescription({ @@ -64,19 +75,21 @@ export const SelectionDialog = ({ if (state.treeDescriptionId) { content = ( - } - /> +
+ } + /> +
); } return (