fix: set responsive paddings on PageHeading

commercelayer · Nov 8, 2024 · fdec29c · fdec29c
1 parent b503442
commit fdec29c
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.test.tsx b/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.test.tsx
@@ -69,7 +69,7 @@ describe('PageHeading gap', () => {
       id: 'heading',
       title: 'My Page Heading'
     })
-    expect(element).toHaveClass('pt-10 pb-14')
+    expect(element).toHaveClass('pt-5 md:pt-10 pb-6 md:pb-14')
   })
 
   test('Should have gap only on top', () => {
@@ -78,8 +78,8 @@ describe('PageHeading gap', () => {
       title: 'My Page Heading',
       gap: 'only-top'
     })
-    expect(element).toHaveClass('pt-10')
-    expect(element).not.toHaveClass('pb-14')
+    expect(element).toHaveClass('pt-5 md:pt-10')
+    expect(element).not.toHaveClass('pb-6 md:pb-14')
   })
 
   test('Should have no vertical gap', () => {

diff --git a/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.tsx b/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.tsx
@@ -67,9 +67,9 @@ const PageHeading = withSkeletonTemplate<PageHeadingProps>(
         className={cn([
           'w-full',
           {
-            'pt-10 pb-14': gap === 'both',
-            'pt-10': gap === 'only-top',
-            'pb-14': gap === 'only-bottom'
+            'pt-5 md:pt-10 pb-6 md:pb-14': gap === 'both',
+            'pt-5 md:pt-10': gap === 'only-top',
+            'pb-6 md:pb-14': gap === 'only-bottom'
           }
         ])}
         {...rest}

diff --git a/packages/app-elements/src/ui/composite/__snapshots__/PageLayout.test.tsx.snap b/packages/app-elements/src/ui/composite/__snapshots__/PageLayout.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`PageLayout > Should be rendered 1`] = `
     class="mb-14"
   >
     <div
-      class="w-full pt-10 pb-14"
+      class="w-full pt-5 md:pt-10 pb-6 md:pb-14"
     >
       <h1
         class="font-semibold text-2xl md:text-title leading-title break-words"

diff --git a/packages/app-elements/src/ui/composite/__snapshots__/PageSkeleton.test.tsx.snap b/packages/app-elements/src/ui/composite/__snapshots__/PageSkeleton.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`PageSkeleton > Should be rendered 1`] = `
             class="select-none pointer-events-none inline"
           >
             <div
-              class="w-full pt-10"
+              class="w-full pt-5 md:pt-10"
             >
               <div
                 class="mb-4 flex items-center justify-between"