feat: improve mobile compatibility

rickstaa · Sep 20, 2022 · 4bc21ea · 4bc21ea · vercel · Sep 20, 2022
1 parent fc74f62
commit 4bc21ea
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -7,7 +7,7 @@ export const Footer = () => {
   return (
     <Grid container>
       <Grid item pt={1} pb={1}>
-        <Typography variant="caption" align="center">
+        <Typography variant="caption" align="center" pl={1} pr={1}>
           Created with{" "}
           <Link
             href="https://github.com/missive/emoji-mart"

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -19,9 +19,15 @@ export const Header = () => {
       alignItems="center"
     >
       <Grid item>
-        <Grid container direction="row" spacing={1} mt={1}>
+        <Grid
+          container
+          direction="row"
+          spacing={1}
+          mt={1}
+          justifyContent="center"
+        >
           <Grid item>
-            <Typography variant="h4" gutterBottom>
+            <Typography variant="h4" gutterBottom align="center">
               GitHub Emoji Picker
             </Typography>
           </Grid>
@@ -35,12 +41,12 @@ export const Header = () => {
         </Grid>
       </Grid>
       <Grid item>
-        <Typography variant="subtitle1">
+        <Typography variant="subtitle1" align="center" pl={1} pr={1}>
           A simple emotion picker that displays all the supported GitHub emojis.
         </Typography>
       </Grid>
       <Grid item>
-        <Grid container spacing={2} pt={1} pb={1}>
+        <Grid container spacing={2} pt={1} pb={1} justifyContent="center">
           <Grid item>
             <GitHubButton
               href="https://github.com/rickstaa/github-emoji-picker"
@@ -93,7 +99,7 @@ export const Header = () => {
             <ThemeSwitch checked={mode !== "dark"} onClick={toggleMode} />
           </Grid>
           <Grid item>
-            <Typography variant="caption">
+            <Typography variant="caption" align="center" pl={1} pr={1}>
               Switch to your preferred theme.
             </Typography>
           </Grid>