chore: make responsive

src/components/input/NumericInputWithUnit.tsx

@@ -128,6 +128,7 @@ export default function NumericInputWithUnit(props: {
           disabled={disabled}
           type="number"
           fullWidth
+          sx={{ width: { xs: '75%', sm: '80%', md: '90%' } }}
           value={(inputValue / siPrefixes[prefix])
             .toFixed(9)
             .replace(/(\d*\.\d+?)0+$/, '$1')}
@@ -140,6 +141,7 @@ export default function NumericInputWithUnit(props: {
           fullWidth
           disabled={disableChangingUnit}
           value={prefix}
+          sx={{ width: { xs: '75%', sm: '80%', md: '90%' } }}
           onChange={(evt) => {
             handlePrefixChange(evt.target.value || '');
           }}
@@ -157,6 +159,7 @@ export default function NumericInputWithUnit(props: {
           fullWidth
           disabled={disableChangingUnit}
           placeholder={'Unit'}
+          sx={{ width: { xs: '75%', sm: '80%', md: '90%' } }}
           value={unit}
           onChange={(event) => {
             setUserSelectedUnit(true);

src/pages/tools/number/generic-calc/index.tsx

@@ -1,4 +1,13 @@
-import { Autocomplete, Box, Radio, Stack, TextField } from '@mui/material';
+import {
+  Autocomplete,
+  Box,
+  MenuItem,
+  Radio,
+  Select,
+  Stack,
+  TextField,
+  useTheme
+} from '@mui/material';
 import React, { useContext, useState } from 'react';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
@@ -16,6 +25,7 @@ import Qty from 'js-quantities';
 import { CustomSnackBarContext } from 'contexts/CustomSnackBarContext';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 function numericSolveEquationFor(
   equation: string,
@@ -51,6 +61,8 @@ export default async function makeTool(
 
   return function GenericCalc({ title }: ToolComponentProps) {
     const { showSnackBar } = useContext(CustomSnackBarContext);
+    const theme = useTheme();
+    const lessThanSmall = useMediaQuery(theme.breakpoints.down('sm'));
 
     // For UX purposes we need to track what vars are
     const [valsBoundToPreset, setValsBoundToPreset] = useState<{
@@ -280,6 +292,40 @@ export default async function makeTool(
             title: 'Variables',
             component: (
               <Box>
+                {lessThanSmall ? (
+                  <Stack
+                    direction={'column'}
+                    spacing={2}
+                    alignItems={'center'}
+                    justifyContent={'space-between'}
+                  >
+                    <Typography>Solve for</Typography>
+                    <Select
+                      sx={{ width: '80%' }}
+                      fullWidth
+                      value={values.outputVariable}
+                      onChange={(event) =>
+                        handleSelectedTargetChange(
+                          event.target.value,
+                          updateField
+                        )
+                      }
+                    >
+                      {calcData.variables.map((variable) => (
+                        <MenuItem
+                          disabled={
+                            valsBoundToPreset[variable.name] !== undefined ||
+                            variable.solvable === false
+                          }
+                          key={variable.name}
+                          value={variable.name}
+                        >
+                          {variable.title}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </Stack>
+                ) : (
                   <Grid container spacing={2} sx={{ mb: 2 }}>
                     <Grid item xs={10}></Grid>
                     <Grid item xs={2}>
@@ -288,23 +334,22 @@ export default async function makeTool(
                       </Typography>
                     </Grid>
                   </Grid>
-
+                )}
                 {calcData.variables.map((variable) => (
                   <Box
                     key={variable.name}
                     sx={{
-                      mb: 3,
+                      my: 3,
                       p: 1,
                       borderRadius: 1
                     }}
                   >
                     <Grid container spacing={2} alignItems="center">
-                      <Grid item xs={10}>
+                      <Grid item xs={lessThanSmall ? 12 : 10}>
                         <Box>
                           <Stack spacing={2}>
-                            <Box>
                             <Stack
-                                direction="row"
+                              direction={{ xs: 'column', md: 'row' }}
                               spacing={2}
                               alignItems="center"
                             >
@@ -316,12 +361,10 @@ export default async function makeTool(
                                 value={values.vars[variable.name]}
                                 disabled={
                                   values.outputVariable === variable.name ||
-                                    valsBoundToPreset[variable.name] !==
+                                  valsBoundToPreset[variable.name] !== undefined
-                                      undefined
                                 }
                                 disableChangingUnit={
-                                    valsBoundToPreset[variable.name] !==
+                                  valsBoundToPreset[variable.name] !== undefined
-                                    undefined
                                 }
                                 onOwnChange={(val) =>
                                   updateVarField(
@@ -334,7 +377,6 @@ export default async function makeTool(
                                 }
                               />
                             </Stack>
-                            </Box>
 
                             {variable.alternates?.map((alt) => (
                               <Box key={alt.title}>
@@ -391,6 +433,7 @@ export default async function makeTool(
                         </Box>
                       </Grid>
 
+                      {!lessThanSmall && (
                         <Grid
                           item
                           xs={2}
@@ -411,6 +454,7 @@ export default async function makeTool(
                             }
                           />
                         </Grid>
+                      )}
                     </Grid>
                   </Box>
                 ))}
@@ -422,10 +466,11 @@ export default async function makeTool(
                 {
                   title: 'Extra outputs',
                   component: (
+                    <Box>
                       <Grid container spacing={2}>
                         {calcData.extraOutputs?.map((extraOutput) => (
                           <Grid item xs={12} key={extraOutput.title}>
-                          <Stack spacing={1} px={4}>
+                            <Stack spacing={1}>
                               <Typography>{extraOutput.title}</Typography>
                               <NumericInputWithUnit
                                 disabled={true}
@@ -439,6 +484,7 @@ export default async function makeTool(
                           </Grid>
                         ))}
                       </Grid>
+                    </Box>
                   )
                 }
               ]