Update styles for custom modal footer

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>

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>