From 89d60351aab4c6cf6b2c5b5d8ffa2193b9bfbbd4 Mon Sep 17 00:00:00 2001
From: Nadeem Raza <text.12mail@gmail.com>
Date: Thu, 18 Jan 2024 20:19:55 +0530
Subject: [PATCH 1/3] fix: Confirmation modal can be very narrow #976

---
 src/components/ConfirmationModal/ConfirmationModal.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ConfirmationModal/ConfirmationModal.tsx b/src/components/ConfirmationModal/ConfirmationModal.tsx
index b647790c1..668e3209b 100644
--- a/src/components/ConfirmationModal/ConfirmationModal.tsx
+++ b/src/components/ConfirmationModal/ConfirmationModal.tsx
@@ -62,7 +62,9 @@ export const ConfirmationModal = ({
       }
       {...props}
     >
-      {children}
+      <div style={{ minWidth: '480px' }}>
+        {children}
+      </div>
     </Modal>
   );
 };

From 65c05e6936a93efefd96b52bf2ed37a61d37ed1f Mon Sep 17 00:00:00 2001
From: Nadeem Raza <text.12mail@gmail.com>
Date: Mon, 22 Jan 2024 11:09:16 +0530
Subject: [PATCH 2/3] Updated confirmation modal width issue PR

---
 .../ConfirmationModal.stories.mdx             |  2 +-
 .../ConfirmationModal/ConfirmationModal.tsx   | 23 +++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/ConfirmationModal/ConfirmationModal.stories.mdx b/src/components/ConfirmationModal/ConfirmationModal.stories.mdx
index 9b2ed3c88..9a396d4ec 100644
--- a/src/components/ConfirmationModal/ConfirmationModal.stories.mdx
+++ b/src/components/ConfirmationModal/ConfirmationModal.stories.mdx
@@ -67,7 +67,7 @@ The title is optional, and the content is fully customisable.
               <h4 style={{ margin: "1rem 0" }}>
                 Run list-backups?
               </h4>
-              <div style={{ width: "480px", marginBottom: "1rem" }}>
+              <div style={{  marginBottom: "1rem" }}>
                 <div className="u-text--muted">UNIT COUNT</div>
                 <div>1</div>
               </div>
diff --git a/src/components/ConfirmationModal/ConfirmationModal.tsx b/src/components/ConfirmationModal/ConfirmationModal.tsx
index 668e3209b..1c5b89090 100644
--- a/src/components/ConfirmationModal/ConfirmationModal.tsx
+++ b/src/components/ConfirmationModal/ConfirmationModal.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, ReactElement } from "react";
+import React, { MouseEvent, ReactElement, useState, useEffect } from "react";
 import type { ReactNode } from "react";
 import { PropsWithSpread, ValueOf } from "types";
 import Button, { ButtonAppearance } from "components/Button";
@@ -43,6 +43,25 @@ export const ConfirmationModal = ({
   onConfirm,
   ...props
 }: Props): ReactElement => {
+  const [minWidth, setMinWidth] = useState("480px");
+  useEffect(() => {
+    const updateMinWidth = () => {
+      if (window.matchMedia("(max-width: 400px)").matches) {
+        setMinWidth("200px");
+      } else if (window.matchMedia("(max-width: 700px)").matches) {
+        setMinWidth("300px");
+      } else {
+        setMinWidth("480px");
+      }
+    };
+
+    window.addEventListener("resize", updateMinWidth);
+    updateMinWidth();
+    return () => {
+      window.removeEventListener("resize", updateMinWidth);
+    };
+  }, []);
+
   return (
     <Modal
       buttonRow={
@@ -62,7 +81,7 @@ export const ConfirmationModal = ({
       }
       {...props}
     >
-      <div style={{ minWidth: '480px' }}>
+      <div style={{ minWidth: minWidth }}>
         {children}
       </div>
     </Modal>

From deffafb452fb83f97bb75fa6035182169b56c9c3 Mon Sep 17 00:00:00 2001
From: Nadeem Raza <text.12mail@gmail.com>
Date: Mon, 22 Jan 2024 11:11:44 +0530
Subject: [PATCH 3/3] Updated confirmation modal width issue PR

---
 src/components/ConfirmationModal/ConfirmationModal.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ConfirmationModal/ConfirmationModal.stories.mdx b/src/components/ConfirmationModal/ConfirmationModal.stories.mdx
index 9a396d4ec..9b2ed3c88 100644
--- a/src/components/ConfirmationModal/ConfirmationModal.stories.mdx
+++ b/src/components/ConfirmationModal/ConfirmationModal.stories.mdx
@@ -67,7 +67,7 @@ The title is optional, and the content is fully customisable.
               <h4 style={{ margin: "1rem 0" }}>
                 Run list-backups?
               </h4>
-              <div style={{  marginBottom: "1rem" }}>
+              <div style={{ width: "480px", marginBottom: "1rem" }}>
                 <div className="u-text--muted">UNIT COUNT</div>
                 <div>1</div>
               </div>