fix: combobox moving when there is an error

vichannnnn · Aug 26, 2023 · 32cde79 · 32cde79
1 parent 952b1ae
commit 32cde79
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/holy-grail-frontend/src/components/Combobox/Combobox.tsx b/holy-grail-frontend/src/components/Combobox/Combobox.tsx
@@ -1,4 +1,4 @@
-import { Autocomplete, AutocompleteProps, TextField } from '@mui/material';
+import { Autocomplete, AutocompleteProps, TextField, Typography } from '@mui/material';
 import { SyntheticEvent } from 'react';
 import { CommonType } from '@api/library';
 
@@ -47,7 +47,16 @@ export const Combobox = ({
         }
       }}
       renderInput={(params) => (
-        <TextField {...params} label={label} error={error} helperText={helperText} />
+        <TextField
+          {...params}
+          label={label}
+          error={error}
+          helperText={
+            <Typography sx={{ fontSize: '80%', position: 'absolute' }} noWrap>
+              {helperText}
+            </Typography>
+          }
+        />
       )}
       isOptionEqualToValue={(option: string | CommonType, value: string | CommonType) =>
         typeof option !== 'string' && typeof value !== 'string' ? option.id === value.id : false

diff --git a/holy-grail-frontend/src/features/Upload/UploadNote.css b/holy-grail-frontend/src/features/Upload/UploadNote.css
@@ -72,7 +72,7 @@
 .note-combobox {
     flex: 1 1 0;
     width: 100%;
-    margin-bottom: 12px;
+    margin-bottom: 16px;
 }