Fix textfield widths across the app (#695)

okfn · Dec 19, 2024 · 895ecb4 · 895ecb4
1 parent ae880a5
commit 895ecb4
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 53 deletions.
diff --git a/client/components/Parts/Fields/Input.tsx b/client/components/Parts/Fields/Input.tsx
@@ -32,43 +32,44 @@ export default function InputField(props: InputFieldProps) {
   const onFocus = props.onFocus || noop
   const onBlur = props.onBlur || noop
   return (
-    <div>
-      <InputLabel
-        shrink={false}>
-          {props.label}
-    </InputLabel>
-    <StyledTextField
-      name={props.name || props.label}
-      type={props.type}
-      margin="normal"
-      value={props.value}
-      size={props.size || 'small'}
-      style={{  maxWidth: '350px', marginTop: '5px' }}
-      disabled={props.disabled}
-      inputProps={props.inputProps}
-      onChange={(ev) => onChange(ev.target.value)}
-      error={props.error}
-      required={props.required}
-      helperText={props.helperText}
-      onKeyDown={onKeyDown}
-      placeholder={props.placeholder}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      autoFocus={props.autoFocus}
-    />
+    <div style={{ flexGrow: 1, width: '100%' }}>
+      <InputLabel shrink={false}>{props.label}</InputLabel>
+      <StyledTextField
+        name={props.name || props.label}
+        type={props.type}
+        margin="normal"
+        value={props.value}
+        size={props.size || 'small'}
+        style={{  maxWidth: '350px', marginTop: '5px' }}
+        disabled={props.disabled}
+        inputProps={props.inputProps}
+        onChange={(ev) => onChange(ev.target.value)}
+        error={props.error}
+        required={props.required}
+        helperText={props.helperText}
+        onKeyDown={onKeyDown}
+        placeholder={props.placeholder}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        autoFocus={props.autoFocus}
+      />
     </div>
   )
 }
 
 
-export const StyledTextField = styled(TextField)(() => ({
-  width: '100%', 
+export const StyledTextField = styled(TextField, {
+})(() => ({
+  width: '100%',
   '& label.Mui-focused': {
     color: '#00D1FF',
   },
   '& .MuiInput-underline:after': {
     borderBottomColor: '#00D1FF',
   },
+  '& .MuiTextField-root': {
+    width: '100%'
+  },
   '& .MuiOutlinedInput-root': {
     '& fieldset': {
       borderColor: 'gray',

diff --git a/client/components/Parts/Fields/Multiline.tsx b/client/components/Parts/Fields/Multiline.tsx
@@ -21,27 +21,23 @@ interface MultilineFieldProps {
 export default function MultilineField(props: MultilineFieldProps) {
   const onFocus = props.onFocus || noop
   return (
-    <div>
-    <InputLabel
-          shrink={false}>
-            {props.label}
-      </InputLabel>
-    <StyledTextField
-      multiline
-      fullWidth
-      placeholder={props.placeholder}
-      name={props.name || props.label}
-      rows={props.rows}
-      type={props.type}
-      margin="normal"
-      style={{ maxWidth: '350px', marginTop: '5px' }}
-      value={props.value}
-      size={props.size || 'small'}
-      onChange={(ev) => props.onChange(ev.target.value as any)}
-      onFocus={onFocus}
-      autoFocus={props.autoFocus}
-      required={props.required}
-    />
+    <div style={{ flexGrow: 1, width: '100%'}}>
+      <InputLabel shrink={false}>{props.label}</InputLabel>
+      <StyledTextField
+        multiline
+        placeholder={props.placeholder}
+        name={props.name || props.label}
+        rows={props.rows}
+        type={props.type}
+        margin="normal"
+        style={{ maxWidth: '350px', marginTop: '5px' }}
+        value={props.value}
+        size={props.size || 'small'}
+        onChange={(ev) => props.onChange(ev.target.value as any)}
+        onFocus={onFocus}
+        autoFocus={props.autoFocus}
+        required={props.required}
+      />
     </div>
   )
 }
diff --git a/client/components/Parts/Fields/YesNo.tsx b/client/components/Parts/Fields/YesNo.tsx
@@ -14,14 +14,11 @@ interface YesNoFieldProps {
 export default function YesNoField(props: YesNoFieldProps) {
   const onFocus = props.onFocus || noop
   return (
-    <div>
-    <InputLabel
-          shrink={false}>
-            {props.label}
-      </InputLabel>
+    <div style={{ flexGrow: 1, width: '100%'}}>
+      <InputLabel shrink={false}>{props.label}</InputLabel>
       <StyledTextField
         select
-        style= {{ maxWidth: '350px', marginTop: '5px' }}
+        style= {{ flexGrow: 1, maxWidth: '350px', marginTop: '5px' }}
         margin="normal"
         size={props.size || 'small'}
         value={props.value ? 'yes' : 'no'}