From 719ac1756336bb6faadff069469b3c9d0704a396 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 22 Nov 2024 14:30:23 +0100
Subject: [PATCH 1/2] Change padding in layout for smaller screens

---
 dapp/src/components/Header/index.tsx |  4 ++--
 dapp/src/components/Layout.tsx       | 10 +++++++---
 dapp/src/theme/Footer.ts             |  2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx
index 8ac5e7ab5..25a48ab7f 100644
--- a/dapp/src/components/Header/index.tsx
+++ b/dapp/src/components/Header/index.tsx
@@ -13,9 +13,9 @@ export default function Header() {
       mx="auto"
       justify="space-between"
       zIndex="header"
-      pt={12}
+      pt={{ base: 4, md: 12 }}
       pb={{ base: 4, xl: 12 }}
-      px={{ base: 10, xl: 30 }}
+      px={{ base: 4, md: "2.5rem", xl: 30 }}
     >
       <Link href={EXTERNAL_HREF.WEBSITE} isExternal>
         <Icon as={AcreLogo} w={20} h={12} />
diff --git a/dapp/src/components/Layout.tsx b/dapp/src/components/Layout.tsx
index 7e3f491d2..a9ec45db6 100644
--- a/dapp/src/components/Layout.tsx
+++ b/dapp/src/components/Layout.tsx
@@ -10,7 +10,10 @@ import Sidebar from "./Sidebar"
 import MobileModeBanner from "./MobileModeBanner"
 import Footer from "./Footer"
 
-const PADDING = "2.5rem" // 40px
+const PADDING = {
+  base: 4,
+  md: "2.5rem", // 40px
+}
 const PAGE_MAX_WIDTH: Record<DappMode, string> = {
   standalone: "63rem", // 1008px
   "ledger-live": "63rem", // 1008px
@@ -33,10 +36,11 @@ function Layout() {
       <Flex
         flexFlow="column"
         mx="auto"
-        p={PADDING}
+        px={PADDING}
+        pb={10}
         pt={0.5}
         w="full"
-        maxWidth={`calc(${maxWidth} + 2*${PADDING})`}
+        maxWidth={`calc(${maxWidth} + 2*${PADDING.md})`}
         flex={1}
       >
         <Outlet />
diff --git a/dapp/src/theme/Footer.ts b/dapp/src/theme/Footer.ts
index 8cf4f3229..3aced57fe 100644
--- a/dapp/src/theme/Footer.ts
+++ b/dapp/src/theme/Footer.ts
@@ -19,7 +19,7 @@ const wrapperStyles = defineStyle({
   gap: { base: 4, xl: 10 },
   maxW: "120rem", // 1920px
   py: 3,
-  px: { base: 10, xl: 30 },
+  px: { base: 4, md: "2.5rem", xl: 30 },
   mx: "auto",
 })
 

From 7b7c4fd49d63b6bfde5e442971eb27919859b572 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 22 Nov 2024 15:06:24 +0100
Subject: [PATCH 2/2] Add comment to code

---
 dapp/src/components/Layout.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/dapp/src/components/Layout.tsx b/dapp/src/components/Layout.tsx
index a9ec45db6..42bc526a7 100644
--- a/dapp/src/components/Layout.tsx
+++ b/dapp/src/components/Layout.tsx
@@ -10,6 +10,7 @@ import Sidebar from "./Sidebar"
 import MobileModeBanner from "./MobileModeBanner"
 import Footer from "./Footer"
 
+// The padding update should also be done in the Header component and Footer theme as well
 const PADDING = {
   base: 4,
   md: "2.5rem", // 40px