Merge pull request #680 from Gary-Community-Ventures/bug/screen_overflow

Fix Screen Overflow On Mobile Selects
Gary-Community-Ventures · Nov 3, 2023 · fd46c30 · fd46c30
2 parents 6b8d26a + 40d68e4
commit fd46c30
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/src/Components/DropdownMenu/BasicSelect.tsx b/src/Components/DropdownMenu/BasicSelect.tsx
@@ -85,7 +85,7 @@ const BasicSelect = ({ componentDetails, options, formDataProperty, submitted }:
   };
 
   return (
-    <FormControl sx={{ mt: 1, mb: 2, minWidth: 210 }} error={errorController.showError}>
+    <FormControl sx={{ mt: 1, mb: 2, minWidth: 210, maxWidth: '100%' }} error={errorController.showError}>
       <InputLabel id={labelId}>{inputLabelText}</InputLabel>
       <Select
         labelId={labelId}
@@ -96,6 +96,7 @@ const BasicSelect = ({ componentDetails, options, formDataProperty, submitted }:
         onChange={(event) => {
           handleBasicSelect(event, formDataProperty);
         }}
+        sx={{ maxWidth: '100%' }}
       >
         {createMenuItems()}
       </Select>

diff --git a/src/Components/DropdownMenu/DropdownMenu.tsx b/src/Components/DropdownMenu/DropdownMenu.tsx
@@ -66,7 +66,7 @@ const DropdownMenu = ({ componentDetails, options, setHouseholdData, householdDa
   };
 
   return (
-    <FormControl sx={{ mt: 1, minWidth: 210 }} error={errorController.showError}>
+    <FormControl sx={{ mt: 1, minWidth: 210, maxWidth: '100%' }} error={errorController.showError}>
       <InputLabel id={labelId}>{inputLabelText}</InputLabel>
       <Select
         labelId={labelId}
@@ -76,6 +76,7 @@ const DropdownMenu = ({ componentDetails, options, setHouseholdData, householdDa
         onChange={(event: SelectChangeEvent) => {
           handleSelectChange(event);
         }}
+        sx={{ maxWidth: '100%' }}
       >
         {createMenuItems(options)}
       </Select>

diff --git a/src/Components/ExpenseBlock/ExpenseQuestion.js b/src/Components/ExpenseBlock/ExpenseQuestion.js
@@ -14,6 +14,7 @@ import Textfield from '../Textfield/Textfield';
 
 const StyledSelectfield = styled(Select)({
   minWidth: 200,
+  maxWidth: '100%',
 });
 
 const StyledDeleteButton = styled(Button)({
@@ -127,7 +128,7 @@ const ExpenseQuestion = ({ expenseData, allExpensesData, setAllExpenses, deleteE
 
   const createExpenseDropdownMenu = (expenseSourceName, index) => {
     return (
-      <FormControl sx={{ m: 1, minWidth: 120 }} error={expenseTypeErrorController.showError}>
+      <FormControl sx={{ m: 1, minWidth: 120, maxWidth: '100%' }} error={expenseTypeErrorController.showError}>
         <InputLabel id="expense-type-label">
           <FormattedMessage
             id="expenseBlock.createExpenseDropdownMenu-expenseTypeInputLabel"

diff --git a/src/Components/IncomeBlock/IncomeQuestion.js b/src/Components/IncomeBlock/IncomeQuestion.js
@@ -18,6 +18,7 @@ import Textfield from '../Textfield/Textfield';
 
 const StyledSelectfield = styled(Select)({
   minWidth: 200,
+  maxWidth: '100%',
 });
 
 const StyledDeleteButton = styled(Button)({
@@ -156,7 +157,7 @@ const IncomeQuestion = ({
 
   const createIncomeStreamsDropdownMenu = (incomeStreamName, index) => {
     return (
-      <FormControl sx={{ m: 1, minWidth: 120 }} error={incomeStreamErrorController.showError}>
+      <FormControl sx={{ m: 1, minWidth: 120, maxWidth: '100%' }} error={incomeStreamErrorController.showError}>
         <InputLabel id="income-type-label">
           <FormattedMessage
             id="personIncomeBlock.createIncomeStreamsDropdownMenu-inputLabel"
@@ -309,7 +310,7 @@ const IncomeQuestion = ({
           <FormattedMessage id={formattedMsgId} defaultMessage={formattedMsgDefaultMsg} />
           {getIncomeStreamNameLabel(allIncomeSources[index].incomeStreamName)}?
         </h2>
-        <FormControl sx={{ m: 1, minWidth: 120 }} error={incomeFrequencyErrorController.showError}>
+        <FormControl sx={{ m: 1, minWidth: 120, maxWidth: '100%' }} error={incomeFrequencyErrorController.showError}>
           <InputLabel id="income-frequency-label">
             <FormattedMessage
               id="personIncomeBlock.createIncomeStreamFrequencyDropdownMenu-freqLabel"