Fixed visual issues

Strexas · Sep 9, 2024 · 29974ef · 29974ef
1 parent ae02827
commit 29974ef
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 15 deletions.
diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroup.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroup.tsx
@@ -36,6 +36,7 @@ export const ToolbarGroup: React.FC<ToolbarGroupProps> = ({ params, buttons }) =
         height: '100%',
         display: 'grid',
         gridTemplateColumns: '30% 70%',
+        overflow: 'auto',
         bgcolor: Theme.palette.background.paper,
       }}
     >

diff --git a/...nt-end/src/features/editor/components/toolbarView/toolbarGroupParams/applyGroupParams.tsx b/...nt-end/src/features/editor/components/toolbarView/toolbarGroupParams/applyGroupParams.tsx
@@ -64,13 +64,13 @@ export const ApplyGroupParams: React.FC<ApplyGroupParamsProps> = () => {
       <Box
         sx={{
           height: '100%',
-          display: 'flex',
+          display: 'grid',
           flexDirection: 'column',
           alignItems: 'start',
           gap: '1rem',
         }}
       >
-        <FormControl sx={{ width: '90%' }}>
+        <FormControl sx={{ width: '90%' }} size='small'>
           <GroupParamsInputLabel label={'Apply To'} error={applyError} />
           <StyledGroupParamsSelect
             id={'lovd-file-select'}
@@ -111,8 +111,8 @@ export const ApplyGroupParams: React.FC<ApplyGroupParamsProps> = () => {
           </StyledGroupParamsSelect>
         </FormControl>
       </Box>
-      <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
-        <FormControl sx={{ width: '90%' }}>
+      <Box sx={{ height: '100%', display: 'grid', flexDirection: 'column', alignItems: 'end' }}>
+        <FormControl sx={{ width: '90%' }} size='small'>
           <GroupParamsInputLabel label={'Save To'} />
           <StyledGroupParamsSelect
             id={'save-to-select'}

diff --git a/...end/src/features/editor/components/toolbarView/toolbarGroupParams/downloadGroupParams.tsx b/...end/src/features/editor/components/toolbarView/toolbarGroupParams/downloadGroupParams.tsx
@@ -62,13 +62,13 @@ export const DownloadGroupParams: React.FC<DownloadGroupParamsProps> = () => {
       <Box
         sx={{
           height: '100%',
-          display: 'flex',
+          display: 'grid',
           flexDirection: 'column',
           alignItems: 'start',
           gap: '1rem',
         }}
       >
-        <FormControl sx={{ width: '50%' }}>
+        <FormControl sx={{ width: '60%' }} size='small'>
           <GroupParamsInputLabel label={'Gene'} />
           <StyledGroupParamsSelect
             id={'gene-select'}
@@ -93,8 +93,8 @@ export const DownloadGroupParams: React.FC<DownloadGroupParamsProps> = () => {
           </StyledGroupParamsSelect>
         </FormControl>
       </Box>
-      <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
-        <FormControl sx={{ width: '90%' }}>
+      <Box sx={{ height: '100%', display: 'grid', flexDirection: 'column', alignItems: 'end' }}>
+        <FormControl sx={{ width: '90%', justifyContent: 'center' }} size='small'>
           <GroupParamsInputLabel label={'Save To'} />
           <StyledGroupParamsSelect
             id={'save-to-select'}

diff --git a/...nt-end/src/features/editor/components/toolbarView/toolbarGroupParams/mergeGroupParams.tsx b/...nt-end/src/features/editor/components/toolbarView/toolbarGroupParams/mergeGroupParams.tsx
@@ -90,13 +90,13 @@ export const MergeGroupParams: React.FC<MergeGroupParamsProps> = () => {
       <Box
         sx={{
           height: '100%',
-          display: 'flex',
           flexDirection: 'column',
           alignItems: 'start',
-          gap: '0.2rem',
+          display: 'grid',
+          gap: '1rem',
         }}
       >
-        <FormControl sx={{ width: '90%' }}>
+        <FormControl sx={{ width: '90%' }} size='small'>
           <GroupParamsInputLabel label={'Lovd File'} error={lovdError} />
           <StyledGroupParamsSelect
             id={'lovd-file-select'}
@@ -136,7 +136,7 @@ export const MergeGroupParams: React.FC<MergeGroupParamsProps> = () => {
             })}
           </StyledGroupParamsSelect>
         </FormControl>
-        <FormControl sx={{ width: '90%' }}>
+        <FormControl sx={{ width: '90%' }} size='small'>
           <GroupParamsInputLabel label={'Clinvar File'} error={clinvarError} />
           <StyledGroupParamsSelect
             id={'clinvar-file-select'}
@@ -176,7 +176,7 @@ export const MergeGroupParams: React.FC<MergeGroupParamsProps> = () => {
             })}
           </StyledGroupParamsSelect>
         </FormControl>
-        <FormControl sx={{ width: '90%' }}>
+        <FormControl sx={{ width: '90%' }} size='small'>
           <GroupParamsInputLabel label={'Gnomad File'} error={gnomadError} />
           <StyledGroupParamsSelect
             id={'gnomad-file-select'}
@@ -217,8 +217,8 @@ export const MergeGroupParams: React.FC<MergeGroupParamsProps> = () => {
           </StyledGroupParamsSelect>
         </FormControl>
       </Box>
-      <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
-        <FormControl sx={{ width: '90%' }}>
+      <Box sx={{ height: '100%', display: 'grid', flexDirection: 'column', alignItems: 'start' }}>
+        <FormControl sx={{ width: '90%' }} size='small'>
           <GroupParamsInputLabel label={'Save To'} />
           <StyledGroupParamsSelect
             id={'save-to-select'}