From fdec29cd84f28af6e856fc9aeeb9d06c566c6d82 Mon Sep 17 00:00:00 2001
From: Giuseppe Ciotola <30926550+gciotola@users.noreply.github.com>
Date: Fri, 8 Nov 2024 09:16:20 +0100
Subject: [PATCH] fix: set responsive paddings on PageHeading

---
 .../src/ui/atoms/PageHeading/PageHeading.test.tsx           | 6 +++---
 .../app-elements/src/ui/atoms/PageHeading/PageHeading.tsx   | 6 +++---
 .../src/ui/composite/__snapshots__/PageLayout.test.tsx.snap | 2 +-
 .../ui/composite/__snapshots__/PageSkeleton.test.tsx.snap   | 2 +-
 4 files changed, 8 insertions(+), 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
index 40083a62a..a1c901d84 100644
--- 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
index 778098fa8..43d9db55b 100644
--- 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
index 45d2c831d..f1d1d5580 100644
--- 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
index 8b578a500..fa342762f 100644
--- 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"