From eaad94adb0bfa31a7a44a547b426c370bf0e48c9 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Thu, 21 Mar 2024 15:39:08 +0100
Subject: [PATCH] Update styles for custom modal footer

---
 .../StakingErrorModal/ServerErrorModal.tsx                | 8 ++++++++
 dapp/src/components/shared/ModalBase/index.tsx            | 4 +++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
index 3a94641b0..b7c07d5fe 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
+++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
@@ -21,6 +21,7 @@ import {
 import { TextMd } from "#/components/shared/Typography"
 import { EXTERNAL_HREF } from "#/constants"
 import IconWrapper from "#/components/shared/IconWrapper"
+import { MODAL_BASE_SIZE } from "#/components/shared/ModalBase"
 
 export default function ServerErrorModal({
   isLoading,
@@ -63,6 +64,13 @@ export default function ServerErrorModal({
         justifyContent="space-between"
         bgColor="gold.200"
         borderRadius="xl"
+        // The dialog container style has padding set by default.
+        // However, the modal footer should be positioned outside this padding.
+        // To avoid changing it, let's set the position to relative and calculate the correct width.
+        position="relative"
+        bottom={-4}
+        left={-4}
+        w={`calc(var(--chakra-sizes-${MODAL_BASE_SIZE}) - 0.25rem)`}
       >
         <Flex flexDirection="column">
           <HStack>
diff --git a/dapp/src/components/shared/ModalBase/index.tsx b/dapp/src/components/shared/ModalBase/index.tsx
index f8e1ad3d0..13731579c 100644
--- a/dapp/src/components/shared/ModalBase/index.tsx
+++ b/dapp/src/components/shared/ModalBase/index.tsx
@@ -1,9 +1,11 @@
 import React from "react"
 import { Modal, ModalContent, ModalOverlay, ModalProps } from "@chakra-ui/react"
 
+export const MODAL_BASE_SIZE = "lg"
+
 export default function ModalBase({ children, ...restProps }: ModalProps) {
   return (
-    <Modal size="lg" {...restProps}>
+    <Modal size={MODAL_BASE_SIZE} {...restProps}>
       <ModalOverlay mt="header_height" />
       <ModalContent mt="modal_shift">{children}</ModalContent>
     </Modal>