casl/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛fix(section): fix section margins on small mobile screens

Browse Source
This commit is contained in:
m-tartari
2026-02-18 12:31:11 +01:00
parent 51023184a3
commit 054da6ae95
1 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/molecules/Section/index.tsx
+27 -16
View File
@@ -19,8 +19,7 @@ const Section: React.FC<SectionProps> = ({ variant = 'primary', imageUrl, imageA
component="section" component="section"
sx={{ sx={{
margin: 0, margin: 0,
padding: 0, px: { xs: 1, sm: 2, md: 0 },
width: '100%',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@@ -38,19 +37,23 @@ const Section: React.FC<SectionProps> = ({ variant = 'primary', imageUrl, imageA
sx={[ sx={[
theme => ({ theme => ({
paddingBottom: 3, paddingBottom: 3,
[theme.breakpoints.up('md')]: { [theme.breakpoints.only('md')]: {
width: '90em', width: theme.breakpoints.values.md,
maxWidth: 'calc(100% - 2em)', maxWidth: 'calc(100% - 2em)',
mx: 'auto', },
[theme.breakpoints.up('lg')]: {
width: theme.breakpoints.values.lg,
}, },
}), }),
theme => theme =>
theme.applyStyles('dark', { theme.applyStyles('dark', {
paddingBottom: 3, paddingBottom: 3,
[theme.breakpoints.up('md')]: { [theme.breakpoints.only('md')]: {
width: '90em', width: theme.breakpoints.values.md,
maxWidth: 'calc(100% - 2em)', maxWidth: 'calc(100% - 2em)',
mx: 'auto', },
[theme.breakpoints.up('lg')]: {
width: theme.breakpoints.values.lg,
}, },
}), }),
]}> ]}>
@@ -63,10 +66,12 @@ const Section: React.FC<SectionProps> = ({ variant = 'primary', imageUrl, imageA
color="text.secondary" color="text.secondary"
sx={theme => ({ sx={theme => ({
paddingBottom: 3, paddingBottom: 3,
[theme.breakpoints.up('md')]: { [theme.breakpoints.only('md')]: {
width: '90em', width: theme.breakpoints.values.md,
maxWidth: 'calc(100% - 4em)', maxWidth: 'calc(100% - 4em)',
mx: 'auto', },
[theme.breakpoints.up('lg')]: {
width: theme.breakpoints.values.lg,
}, },
})}> })}>
{props.headline} {props.headline}
@@ -78,20 +83,26 @@ const Section: React.FC<SectionProps> = ({ variant = 'primary', imageUrl, imageA
justifyContent: 'center', justifyContent: 'center',
[theme.breakpoints.down('md')]: { [theme.breakpoints.down('md')]: {
minHeight: '60vh', // minHeight: imageUrl && '60vh',
flexDirection: props.title || props.headline ? 'column' : 'column-reverse', flexDirection: props.title || props.headline ? 'column' : 'column-reverse',
alignItems: 'align-items', alignItems: 'center',
gap: 3, gap: 3,
}, },
[theme.breakpoints.only('md')]: {
[theme.breakpoints.up('md')]: {
mx: 'auto', mx: 'auto',
width: '90em', width: theme.breakpoints.values.md,
maxWidth: 'calc(100% - 4em)', maxWidth: 'calc(100% - 4em)',
flexDirection: variant === 'primary' ? 'row-reverse' : 'row', flexDirection: variant === 'primary' ? 'row-reverse' : 'row',
alignItems: 'center', alignItems: 'center',
gap: 5, gap: 5,
}, },
[theme.breakpoints.up('lg')]: {
mx: 'auto',
width: theme.breakpoints.values.lg,
flexDirection: variant === 'primary' ? 'row-reverse' : 'row',
alignItems: 'center',
gap: 5,
},
})}> })}>
{imageUrl && {imageUrl &&
(imageCaption ? ( (imageCaption ? (