limiting pilot data for unauthenticated users (#68)

* limiting pilot data for unauthenticated users

* limiting pilot data for unauthenticated users

app/src/components/pilotFormMedical/PilotFormMedical.tsx

@@ -1,4 +1,4 @@
-import { DatePicker, Grid, Select, Typography } from '@noahspan/noahspan-components';
+import { DatePicker, Grid, Select, theme, Typography, useMediaQuery } from '@noahspan/noahspan-components';
 import { Controller, useFormContext } from "react-hook-form"
 import { PilotFormMedicalProps } from "./PilotFormMedicalProps.interface";
 
@@ -7,17 +7,18 @@ const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
     control,
     formState: { errors },
     setValue
-  } = useFormContext()
+  } = useFormContext();
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
 
   return (
     <Grid container spacing={2}>
       <Grid size={12}>
         <Typography variant="h5">Medical</Typography>
       </Grid>
-      <Grid size={3}>
+      <Grid size={isMedium ? 3 : 12}>
         <Typography variant="h6">Class</Typography>
       </Grid>
-      <Grid size={9}>
+      <Grid size={isMedium ? 9 : 12}>
         <Controller
           name="medicalClass"
           control={control}
@@ -53,10 +54,10 @@ const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
           }}
         />
       </Grid>
-      <Grid size={3}>
+      <Grid size={isMedium ? 3 : 12}>
         <Typography variant="h6">Expiration</Typography>
       </Grid>
-      <Grid size={9}>
+      <Grid size={isMedium ? 9 : 12}>
         <Controller
           name="medicalExpiration"
           control={control}