adjust spacings for better aesthetics on mobile

once-ui-system · Nov 8, 2024 · 55ef7e0 · 55ef7e0
1 parent 3149df5
commit 55ef7e0
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/components/Mailchimp.tsx b/src/components/Mailchimp.tsx
@@ -62,7 +62,7 @@ export const Mailchimp = (
         <Flex
             style={{overflow: 'hidden'}}
             position="relative"
-            fillWidth padding="l"  radius="l" marginBottom="m"
+            fillWidth padding="xl"  radius="l" marginBottom="m"
             direction="column" alignItems="center" align="center"
             background="surface" border="neutral-medium" borderStyle="solid-1">
             <Background

diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
@@ -80,7 +80,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
             {images.length > 1 && (
                 <Flex
                     gap="4" paddingX="s"
-                    fillWidth maxWidth={32}
+                    fillWidth
                     justifyContent="center">
                     {images.map((_, index) => (
                         <Flex
@@ -101,22 +101,22 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
             )}
             <Flex
                 mobileDirection="column"
-                fillWidth paddingX="l" paddingTop="xs" paddingBottom="m" gap="l">
+                fillWidth paddingX="s" paddingTop="12" paddingBottom="24" gap="l">
                 {title && (
                     <Flex
                         flex={5}>
                         <Heading
                             as="h2"
                             wrap="balance"
-                            variant="display-strong-xs">
+                            variant="heading-strong-xl">
                             {title}
                         </Heading>
                     </Flex>
                 )}
                 {(avatars?.length > 0 || description?.trim() || content?.trim()) && (
                     <Flex
                         flex={7} direction="column"
-                        gap="s">
+                        gap="16">
                         {avatars?.length > 0 && (
                             <AvatarGroup
                                 avatars={avatars}