fix: responsiveness of sideNav component

src/features/profile/components/setting/Setting.tsx

@@ -11,6 +11,7 @@ import { CardContainer } from '@/components/CardContainer';
 import { useTranslation } from 'react-i18next';
 import { ThemeToggleButton } from '@/components/ThemToggle';
 import Logo from '@/components/Logo';
+import { PageWrapper } from '../PageWrapper';
 
 export function Setting() {
   const { t, i18n } = useTranslation(['setting']);
@@ -57,113 +58,143 @@ export function Setting() {
     isEditing ? handleSave() : setIsEditing(true);
 
   return (
-    <Box sx={{ backgroundColor: 'background.paper', minHeight: '100vh' }}>
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          py: 2,
-          height: 84,
-        }}
-      >
+    <PageWrapper>
+      <Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
         <Logo />
       </Box>
       <Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
-      <CardContainer
-        title={t('settings.title')}
-        subtitle={t('settings.description')}
-        highlighted={isEditing}
-        action={
-          <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-            {isEditing && (
+      <Box
+        sx={{
+          width: '100%', // always span full width
+          px: { xs: 0, sm: 3 }, // no side padding on xs, keep padding on sm+
+          mx: 0, // zero out any horizontal margin
+        }}
+      >
+        <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',
-          }}
+            </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,
-              mx: 'auto',
-              width: { xs: '100%', md: 690 },
-              // px: 4,
+              bgcolor: 'background.paper',
+              width: '100%',
             }}
           >
-            <Box sx={{ flex: 1, maxWidth: { sm: 310 }, width: '100%' }}>
-              {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, maxWidth: { sm: 310 }, width: '100%' }}>
+            <Box sx={{ mt: 2, width: '100%' }}>
               {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
@@ -171,41 +202,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, maxWidth: { sm: 310 }, 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>
-    </Box>
+        </CardContainer>
+      </Box>
+    </PageWrapper>
   );
 }