fix: make the nav items responsive to avoid two-line layout on screen shrink

Author: elainefan331

src/components/NavBar/NavItems.tsx

@@ -82,9 +82,14 @@ const NavItems: React.FC = () => {
         <Grid item xs={12} md="auto">
           <Grid
             container
-            spacing={3}
+            spacing={{ xs: 2, md: 5 }}
+            direction={{ xs: "row", sm: "row" }} // row on mobile
             justifyContent="center"
-            sx={{ mb: { xs: 1 } }}
+            alignItems="center"
+            sx={{
+              mb: { xs: 1 },
+              rowGap: { xs: 1, sm: 2 },
+            }}
           >
             {[
               { text: "About", url: RoutesEnum.ABOUT },
@@ -107,6 +112,10 @@ const NavItems: React.FC = () => {
                       lineHeight={"1.5rem"}
                       letterSpacing={"0.05rem"}
                       sx={{
+                        fontSize: {
+                          xs: "0.8rem", // font size on mobile
+                          sm: "1rem",
+                        },
                         color: Colors.white,
                         transition: "color 0.3s ease, transform 0.3s ease",
                         textTransform: "uppercase",
@@ -127,6 +136,10 @@ const NavItems: React.FC = () => {
                       lineHeight={"1.5rem"}
                       letterSpacing={"0.05rem"}
                       sx={{
+                        fontSize: {
+                          xs: "0.8rem", // font size on mobile
+                          sm: "1rem",
+                        },
                         color: Colors.white,
                         transition: "color 0.3s ease, transform 0.3s ease",
                         textTransform: "uppercase",

src/components/StatisticsBanner.tsx

@@ -85,7 +85,17 @@ const StatisticsBanner: React.FC = () => {
     number: string;
     label: string;
   }) => (
-    <Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        textAlign: {
+          xs: "left",
+          sm: "center",
+        },
+      }}
+    >
       <Box sx={iconStyle}>{icon}</Box>
       <Box>
         <Typography sx={numberTextStyle}>{number}</Typography>
@@ -101,7 +111,10 @@ const StatisticsBanner: React.FC = () => {
         padding: "1rem",
         display: "flex",
         flexWrap: "wrap",
-        justifyContent: "center",
+        justifyContent: {
+          xs: "flex-start",
+          sm: "center",
+        },
         gap: "2rem",
       }}
     >