Refactor MainPageLayout for improved responsiveness: Updated layout to stack title above navigation on portrait phones, adjusted flex properties for better alignment, and enhanced navigation rendering for different screen sizes, ensuring a more user-friendly experience across devices.

src/components/MainPageLayout.js

@@ -124,7 +124,60 @@ const MainPageLayout = () => {
         mb: 4,
         mt: 2,
         px: 0,
-        transition: "all 0.3s ease-in-out"
+        transition: "all 0.3s ease-in-out",
+        // Portrait phone: stack title above navigation
+        flexDirection: { 
+          xs: "column", 
+          sm: "row" 
+        },
+        // Portrait phone: center align when stacked
+        alignItems: { 
+          xs: "center", 
+          sm: "center" 
+        }
+      }}>
+        {/* Title for portrait phones - shown first */}
+        <Box sx={{ 
+          display: { xs: "block", sm: "none" },
+          mb: { xs: 2, sm: 0 },
+          width: "100%",
+          textAlign: "center"
+        }}>
+          {Object.entries(allTitles).map(([pageType, title]) => (
+            <Typography
+              key={pageType}
+              variant="h3"
+              component="h1"
+              sx={{
+                fontFamily: "SwashingtonCP",
+                fontSize: { xs: "2.125rem", sm: "2.125rem", md: "3rem" },
+                textAlign: "center",
+                color: "primary.main",
+                textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)",
+                transition: "opacity 0.5s ease-in-out",
+                opacity: getOpacity(pageType),
+                position: pageType === "home" ? "relative" : "absolute",
+                top: pageType !== "home" ? "50%" : "auto",
+                left: pageType !== "home" ? "50%" : "auto",
+                transform: pageType !== "home" ? "translate(-50%, -50%)" : "none",
+                width: "100%",
+                pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none",
+                lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
+                wordWrap: "break-word",
+                hyphens: "auto"
+              }}
+            >
+              {title}
+            </Typography>
+          ))}
+        </Box>
+
+        {/* Navigation container for portrait phones */}
+        <Box sx={{ 
+          display: { xs: "flex", sm: "contents" },
+          width: { xs: "100%", sm: "auto" },
+          justifyContent: { xs: "space-between", sm: "initial" },
+          alignItems: "center"
         }}>
           {/* Left Navigation - Layered rendering */}
           <Box sx={{ 
@@ -133,7 +186,7 @@ const MainPageLayout = () => {
             flexShrink: 0,
             justifyContent: "flex-start",
             position: "relative",
-          mr: 2
+            mr: { xs: 0, sm: 2 }
           }}>
             {navTexts.map((navItem, index) => {
               const isActive = navConfig.leftNav && navConfig.leftNav.text === navItem.text;
@@ -177,10 +230,10 @@ const MainPageLayout = () => {
             })}
           </Box>
 
-        {/* Center Title - Layered rendering - This defines the height for centering */}
+          {/* Center Title - Layered rendering - Hidden on portrait phones, shown on larger screens */}
           <Box sx={{ 
             flex: 1, 
-          display: "flex", 
+            display: { xs: "none", sm: "flex" },
             justifyContent: "center",
             alignItems: "center",
             px: 0,
@@ -223,7 +276,7 @@ const MainPageLayout = () => {
             flexShrink: 0,
             justifyContent: "flex-end",
             position: "relative",
-          ml: 2
+            ml: { xs: 0, sm: 2 }
           }}>
             {navTexts.map((navItem, index) => {
               const isActive = navConfig.rightNav && navConfig.rightNav.text === navItem.text;
@@ -267,6 +320,7 @@ const MainPageLayout = () => {
             })}
           </Box>
         </Box>
+      </Box>
 
       {/* Content Boxes - Layered rendering */}
       <Box sx={{ position: "relative", mb: 4 }}>