From 911a20ad9fa9a1a48c4023684269bfea2483bd91 Mon Sep 17 00:00:00 2001
From: Koosha Lahouti <koosha@Kooshas-MacBook-Air.local>
Date: Wed, 6 Aug 2025 12:15:06 -0700
Subject: [PATCH] fix: responsiveness of setting page and correct the width and
 height size of those pages

---
 .../profile/components/setting/Setting.tsx    | 240 +++++++++---------
 .../components/userInformation/UserForm.tsx   |  14 -
 src/features/profile/routes/SettingPage.tsx   | 132 +++++-----
 3 files changed, 195 insertions(+), 191 deletions(-)
 delete mode 100644 src/features/profile/components/userInformation/UserForm.tsx

diff --git a/src/features/profile/components/setting/Setting.tsx b/src/features/profile/components/setting/Setting.tsx
index bf75e2c..95bcbfe 100644
--- a/src/features/profile/components/setting/Setting.tsx
+++ b/src/features/profile/components/setting/Setting.tsx
@@ -59,115 +59,149 @@ export function Setting() {
 
   return (
     <PageWrapper>
-      <Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
-        <Logo />
-      </Box>
-      <Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
       <Box
         sx={{
-          width: '100%',
-          px: { xs: 0, sm: 3 },
-          mx: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: '100vh',
         }}
       >
-        <CardContainer
-          title={t('settings.title')}
-          subtitle={t('settings.description')}
-          highlighted={isEditing}
-          action={
-            <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-              {isEditing && (
+        <Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
+          <Logo />
+        </Box>
+        <Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
+        <Box
+          sx={{
+            width: '100%',
+            px: { xs: 0, sm: 3 },
+            mx: 0,
+          }}
+        >
+          <CardContainer
+            title={t('settings.title')}
+            subtitle={t('settings.description')}
+            highlighted={isEditing}
+            action={
+              <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+                {isEditing && (
+                  <Button
+                    variant="text"
+                    onClick={handleCancel}
+                    size="large"
+                    sx={{
+                      color: 'primary.main',
+                      textTransform: 'none',
+                      width: { xs: '100%', sm: 'auto' },
+                      fontSize: { xs: '0.85rem', sm: '1rem' },
+                    }}
+                  >
+                    {t('settings.rejectButton')}
+                  </Button>
+                )}
                 <Button
-                  variant="text"
-                  onClick={handleCancel}
+                  onClick={handleEditToggle}
                   size="large"
+                  variant="outlined"
                   sx={{
-                    color: 'primary.main',
                     textTransform: 'none',
-                    width: { xs: '100%', sm: 'auto' },
-                    fontSize: { xs: '0.85rem', sm: '1rem' },
+                    border: '1px solid',
+                    borderColor: 'primary.main',
+                    borderRadius: '4px',
+                    bgcolor: isEditing ? 'primary.main' : 'background.paper',
+                    color: isEditing ? 'primary.contrastText' : 'primary.main',
+                    px: { xs: 2, sm: '22px' },
+                    py: { xs: '6px', sm: '8px' },
+                    width: { xs: '100%', sm: isEditing ? '85px' : '93px' },
+                    fontSize: { xs: '0.9rem', sm: '1rem' },
                   }}
                 >
-                  {t('settings.rejectButton')}
+                  {isEditing
+                    ? t('settings.saveButton')
+                    : t('settings.editButton')}
                 </Button>
-              )}
-              <Button
-                onClick={handleEditToggle}
-                size="large"
-                variant="outlined"
-                sx={{
-                  textTransform: 'none',
-                  border: '1px solid',
-                  borderColor: 'primary.main',
-                  borderRadius: '4px',
-                  bgcolor: isEditing ? 'primary.main' : 'background.paper',
-                  color: isEditing ? 'primary.contrastText' : 'primary.main',
-                  px: { xs: 2, sm: '22px' },
-                  py: { xs: '6px', sm: '8px' },
-                  width: { xs: '100%', sm: isEditing ? '85px' : '93px' },
-                  fontSize: { xs: '0.9rem', sm: '1rem' },
-                }}
-              >
-                {isEditing
-                  ? t('settings.saveButton')
-                  : t('settings.editButton')}
-              </Button>
-            </Box>
-          }
-        >
-          <Box
-            sx={{
-              px: { xs: 2, sm: 3, md: 4 },
-              py: 2,
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 2,
-              bgcolor: 'background.paper',
-              width: '100%',
-            }}
+              </Box>
+            }
           >
             <Box
               sx={{
+                px: { xs: 2, sm: 3, md: 4 },
+                py: 2,
                 display: 'flex',
-                flexDirection: { xs: 'column', sm: 'row' },
+                flexDirection: 'column',
                 gap: 2,
-                mt: 2,
+                bgcolor: 'background.paper',
                 width: '100%',
               }}
             >
-              <Box sx={{ flex: 1 }}>
-                {isEditing ? (
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Typography variant="body1">
-                      {t('settings.theme')}
-                    </Typography>
-                    <ThemeToggleButton />
-                  </Box>
-                ) : (
-                  <Box>
-                    <Typography variant="caption" color="text.secondary">
-                      {t('settings.theme')}
-                    </Typography>
-                    <Typography variant="body1">
-                      {mode === 'light'
-                        ? t('settings.light')
-                        : t('settings.dark')}
-                    </Typography>
-                  </Box>
-                )}
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: { xs: 'column', sm: 'row' },
+                  gap: 2,
+                  mt: 2,
+                  width: '100%',
+                }}
+              >
+                <Box sx={{ flex: 1 }}>
+                  {isEditing ? (
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <Typography variant="body1">
+                        {t('settings.theme')}
+                      </Typography>
+                      <ThemeToggleButton />
+                    </Box>
+                  ) : (
+                    <Box>
+                      <Typography variant="caption" color="text.secondary">
+                        {t('settings.theme')}
+                      </Typography>
+                      <Typography variant="body1">
+                        {mode === 'light'
+                          ? t('settings.light')
+                          : t('settings.dark')}
+                      </Typography>
+                    </Box>
+                  )}
+                </Box>
+                <Box sx={{ flex: 1 }}>
+                  {isEditing ? (
+                    <Autocomplete
+                      options={languageOptions}
+                      getOptionLabel={(o) => o.label}
+                      value={
+                        languageOptions.find((o) => o.code === draftLanguage) ||
+                        null
+                      }
+                      onChange={handleDraftLanguageChange}
+                      renderInput={(p) => (
+                        <TextField {...p} label={t('settings.language')} />
+                      )}
+                      size="medium"
+                      fullWidth
+                    />
+                  ) : (
+                    <Box>
+                      <Typography variant="caption" color="text.secondary">
+                        {t('settings.language')}
+                      </Typography>
+                      <Typography variant="body1">
+                        {
+                          languageOptions.find((o) => o.code === savedLanguage)
+                            ?.label
+                        }
+                      </Typography>
+                    </Box>
+                  )}
+                </Box>
               </Box>
-              <Box sx={{ flex: 1 }}>
+              <Box sx={{ mt: 2, width: { xs: '100%', md: '50%' } }}>
                 {isEditing ? (
                   <Autocomplete
-                    options={languageOptions}
-                    getOptionLabel={(o) => o.label}
-                    value={
-                      languageOptions.find((o) => o.code === draftLanguage) ||
-                      null
-                    }
-                    onChange={handleDraftLanguageChange}
+                    options={calendarOptions}
+                    value={selectedCalendar}
+                    onChange={(_, v) => v && setSelectedCalendar(v)}
                     renderInput={(p) => (
-                      <TextField {...p} label={t('settings.language')} />
+                      <TextField {...p} label={t('settings.calendar')} />
                     )}
                     size="medium"
                     fullWidth
@@ -175,41 +209,15 @@ export function Setting() {
                 ) : (
                   <Box>
                     <Typography variant="caption" color="text.secondary">
-                      {t('settings.language')}
-                    </Typography>
-                    <Typography variant="body1">
-                      {
-                        languageOptions.find((o) => o.code === savedLanguage)
-                          ?.label
-                      }
+                      {t('settings.calendar')}
                     </Typography>
+                    <Typography variant="body1">{selectedCalendar}</Typography>
                   </Box>
                 )}
               </Box>
             </Box>
-            <Box sx={{ mt: 2, width: '100%' }}>
-              {isEditing ? (
-                <Autocomplete
-                  options={calendarOptions}
-                  value={selectedCalendar}
-                  onChange={(_, v) => v && setSelectedCalendar(v)}
-                  renderInput={(p) => (
-                    <TextField {...p} label={t('settings.calendar')} />
-                  )}
-                  size="medium"
-                  fullWidth
-                />
-              ) : (
-                <Box>
-                  <Typography variant="caption" color="text.secondary">
-                    {t('settings.calendar')}
-                  </Typography>
-                  <Typography variant="body1">{selectedCalendar}</Typography>
-                </Box>
-              )}
-            </Box>
-          </Box>
-        </CardContainer>
+          </CardContainer>
+        </Box>
       </Box>
     </PageWrapper>
   );
diff --git a/src/features/profile/components/userInformation/UserForm.tsx b/src/features/profile/components/userInformation/UserForm.tsx
deleted file mode 100644
index bcfd593..0000000
--- a/src/features/profile/components/userInformation/UserForm.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Box } from '@mui/material';
-import { PersonalInformation } from './PersonalInformation';
-import { PhoneNumber } from './PhoneNumber';
-import { SocialMedia } from './SocialMedia';
-
-export function UserForm() {
-  return (
-    <Box sx={{ width: '100%', overflowX: 'clip' }}>
-      <PersonalInformation />
-      <PhoneNumber />
-      <SocialMedia />
-    </Box>
-  );
-}
diff --git a/src/features/profile/routes/SettingPage.tsx b/src/features/profile/routes/SettingPage.tsx
index 30377f6..4404f92 100644
--- a/src/features/profile/routes/SettingPage.tsx
+++ b/src/features/profile/routes/SettingPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
   createBrowserRouter,
   RouterProvider,
@@ -71,7 +71,7 @@ export function Layout() {
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   const contentMaxWidth = '100%';
-  const contentWidthMd = '810px';
+  // const contentWidthMd = '810px';
   const navWidthMd = '274px';
 
   const navConfig: NavItemConfig[] = [
@@ -183,68 +183,78 @@ export function Layout() {
 
   return (
     <Box
-      display="flex"
-      flexDirection="column"
-      justifyContent="center"
-      alignItems="center"
-      minHeight="100vh"
-      px={{ xs: 2, sm: 3 }}
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        px: '185px',
+        py: '105px',
+        boxSizing: 'border-box',
+        backgroundColor: 'background.default',
+      }}
     >
-      {!isMdUp && (
-        <AppBar position="static">
-          <Toolbar sx={{ backgroundColor: 'background.paper' }}>
-            <IconButton
-              edge="start"
-              color="inherit"
-              onClick={() => setDrawerOpen(true)}
-            >
-              <Menu size={24} color="#1976d2" variant="Bold" />
-            </IconButton>
-          </Toolbar>
-        </AppBar>
-      )}
-      <Box display="flex" width="100%" maxWidth="100vw">
-        {isMdUp && (
-          <Box flex="0 0 auto" width={navWidthMd} position="relative">
-            <SideNav
-              navConfig={navConfig}
-              header={<Header />}
-              activePath={location.pathname + location.hash}
-              sideNavVariant="full"
-              positioning="absolute"
-            />
-          </Box>
+      <Box
+        width={1100}
+        height={800}
+        display="flex"
+        flexDirection="column"
+        bgcolor="background.paper"
+        overflow="hidden"
+        borderRadius={2}
+      >
+        {!isMdUp && (
+          <AppBar position="static">
+            <Toolbar sx={{ backgroundColor: 'background.paper' }}>
+              <IconButton edge="start" onClick={() => setDrawerOpen(true)}>
+                <Menu size={24} color="#1976d2" variant="Bold" />
+              </IconButton>
+            </Toolbar>
+          </AppBar>
         )}
-        <Box
-          flexGrow={1}
-          width={1070}
-          maxWidth={1070}
-          height={{ xs: 'auto', md: '814px' }}
-          sx={{
-            bgcolor: 'background.paper',
-            px: { xs: 2, sm: 3 },
-            overflowY: 'auto',
-          }}
-        >
-          <Outlet />
-        </Box>
-      </Box>
-      {!isMdUp && (
-        <Drawer
-          anchor="left"
-          open={drawerOpen}
-          onClose={() => setDrawerOpen(false)}
-        >
-          <Box width={navWidthMd}>
-            <SideNav
-              navConfig={navConfig}
-              header={<Header />}
-              activePath={location.pathname + location.hash}
-              sideNavVariant="full"
-            />
+
+        <Box sx={{ flexGrow: 1, display: 'flex', overflow: 'hidden' }}>
+          {isMdUp && (
+            <Box sx={{ width: navWidthMd, flexShrink: 0 }}>
+              <SideNav
+                navConfig={navConfig}
+                header={<Header />}
+                activePath={location.pathname + location.hash}
+                sideNavVariant="full"
+                positioning="absolute"
+              />
+            </Box>
+          )}
+
+          <Box
+            sx={{
+              flexGrow: 1,
+              height: '100%',
+              overflowY: 'auto',
+              px: 3,
+            }}
+          >
+            <Outlet />
           </Box>
-        </Drawer>
-      )}
+        </Box>
+
+        {!isMdUp && (
+          <Drawer
+            anchor="left"
+            open={drawerOpen}
+            onClose={() => setDrawerOpen(false)}
+          >
+            <Box width={navWidthMd}>
+              <SideNav
+                navConfig={navConfig}
+                header={<Header />}
+                activePath={location.pathname + location.hash}
+                sideNavVariant="full"
+              />
+            </Box>
+          </Drawer>
+        )}
+      </Box>
     </Box>
   );
 }