[PwaAppBar] Adjust button sizes and spacing for mobile layout.

BIDMCDigitalPsychiatry · Nov 20, 2024 · 6ca9d64 · 6ca9d64
1 parent 84791cf
commit 6ca9d64
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/src/components/pwa/PwaAppBar.tsx b/src/components/pwa/PwaAppBar.tsx
@@ -17,32 +17,32 @@ export default function PwaAppBar({
 }) {
   const setRef = useAppBarHeightSetRef();
   return (
-    <Grid ref={setRef} container justifyContent='space-between' alignItems='center' spacing={1}>
+    <Grid ref={setRef} container justifyContent='space-between' alignItems='center' spacing={0.75}>
       <Grid item sx={{ textAlign: 'center' }}>
         <PwaLogo />
       </Grid>
       <Grid item>
-        <Grid container justifyContent='flex-end' spacing={1}>
+        <Grid container justifyContent='flex-end' spacing={0.75}>
           {!hideSearch && (
             <Grid item>
-              <Button variant='contained' size={navButtonSize} onClick={handleSearch} disabled={disableSearch} sx={{ px: 0 }}>
+              <Button variant='contained' size={navButtonSize} onClick={handleSearch} disabled={disableSearch} sx={{ px: 0, minWidth: 56 }}>
                 Search
               </Button>
             </Grid>
           )}
           <Grid item>
-            <Button variant='contained' size={navButtonSize} onClick={handleReset} sx={{ px: 0 }}>
+            <Button variant='contained' size={navButtonSize} onClick={handleReset} sx={{ px: 0, minWidth: 56 }}>
               Reset
             </Button>
           </Grid>
           <Grid item>
-            <Button variant='contained' size={navButtonSize} onClick={handleBack} disabled={disableBack} sx={{ px: 0 }}>
+            <Button variant='contained' size={navButtonSize} onClick={handleBack} disabled={disableBack} sx={{ px: 0, minWidth: 56 }}>
               Back
             </Button>
           </Grid>
           {!hideNext && (
             <Grid item>
-              <Button variant='contained' size={navButtonSize} onClick={handleNext} disabled={disableNext} sx={{ px: 0 }}>
+              <Button variant='contained' size={navButtonSize} onClick={handleNext} disabled={disableNext} sx={{ px: 0, minWidth: 56 }}>
                 Next
               </Button>
             </Grid>