Change padding in layout for smaller screens (#892)

This PR updates padding for smaller screens.

**Before**
<img width="319" alt="Screenshot 2024-11-22 at 15 08 20"
src="https://github.com/user-attachments/assets/9023f68b-b862-4800-af9e-dffabcdf6ad8">


**After**
<img width="306" alt="Screenshot 2024-11-22 at 15 07 51"
src="https://github.com/user-attachments/assets/950a4be2-fc4d-428b-81e1-e34f0cf45d80">

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} />

dapp/src/components/Layout.tsx

@@ -10,7 +10,11 @@ import Sidebar from "./Sidebar"
 import MobileModeBanner from "./MobileModeBanner"
 import Footer from "./Footer"
 
-const PADDING = "2.5rem" // 40px
+// The padding update should also be done in the Header component and Footer theme as well
+const PADDING = {
+  base: 4,
+  md: "2.5rem", // 40px
+}
 const PAGE_MAX_WIDTH: Record<DappMode, string> = {
   standalone: "63rem", // 1008px
   "ledger-live": "63rem", // 1008px
@@ -33,10 +37,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 />

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",
 })