Use dynamic spacing based on viewport

1 files changed, 13 insertions, 4 deletions

diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx
index bde5280..a1e4fa8 100644
--- a/src/components/RsvpForm.tsx
+++ b/src/components/RsvpForm.tsx
@@ -73,7 +73,7 @@ function RsvpForm() {
     } else if (partySize < previousPartySize && partySize > 0) {
       remove(
         [...Array(previousPartySize - partySize).keys()].map(
-          (_, i) => partySize + i - 1
+          (_, i) => partySize - 1 + i
         )
       );
       setPreviousPartySize(partySize);
@@ -149,6 +149,9 @@ function RsvpForm() {
             type="number"
             variant="outlined"
             fullWidth
+            onWheel={(event) => {
+              event.currentTarget.blur();
+            }}
             error={!!errors.partySize}
             helperText={errors.partySize?.message}
             required
@@ -175,8 +178,14 @@ function RsvpForm() {
         </Grid>
         {fields.map((field, index) => {
           return (
-            <Grid container item columnSpacing={2} key={field.id}>
-              <Grid item xs={6}>
+            <Grid
+              container
+              item
+              columnSpacing={2}
+              rowSpacing={{ xs: 1 }}
+              key={field.id}
+            >
+              <Grid item xs={12} md={6} lg={6}>
                 <TextField
                   label="First Name"
                   variant="outlined"
@@ -189,7 +198,7 @@ function RsvpForm() {
                   })}
                 />
               </Grid>
-              <Grid item xs={6}>
+              <Grid item xs={12} md={6} lg={6}>
                 <TextField
                   label="Last Name"
                   variant="outlined"