From 20afbfd60189c5faeb8a8158a5f89cef3cae7c1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?dean=20gl=C3=BCkler?=
 <32249655+deanglukler@users.noreply.github.com>
Date: Wed, 6 Dec 2023 17:29:42 +0000
Subject: [PATCH] fix(UI):Donation Modal "Edit Amount" Overflow (#52407)

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
---
 client/src/components/Donation/donate-form.tsx | 10 ++++++----
 client/src/components/Donation/donation.css    | 16 ++++++++++------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Donation/donate-form.tsx b/client/src/components/Donation/donate-form.tsx
index 8ac99336320..232ec025c0f 100644
--- a/client/src/components/Donation/donate-form.tsx
+++ b/client/src/components/Donation/donate-form.tsx
@@ -217,9 +217,11 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
 
     const confirmationWithEditAmount = (
       <>
-        {t('donate.confirm-multitier', {
-          usd: formattedAmountLabel(donationAmount)
-        })}
+        <b>
+          {t('donate.confirm-multitier', {
+            usd: formattedAmountLabel(donationAmount)
+          })}
+        </b>
 
         <button
           type='button'
@@ -238,7 +240,7 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
     };
     return (
       <>
-        <b className={confirmationClass()}>{confirmationWithEditAmount}</b>
+        <div className={confirmationClass()}>{confirmationWithEditAmount}</div>
         <Spacer size={editAmount ? 'small' : 'medium'} />
         <fieldset
           data-playwright-test-label='donation-form'
diff --git a/client/src/components/Donation/donation.css b/client/src/components/Donation/donation.css
index 1e0cc354412..e01f64bcefe 100644
--- a/client/src/components/Donation/donation.css
+++ b/client/src/components/Donation/donation.css
@@ -95,7 +95,7 @@
 @media (min-width: 1200px) {
   /*
   This style allows multi columns in the same row.
-  It will become a functionality once the Grid system is updated. 
+  It will become a functionality once the Grid system is updated.
   */
   .donate-page-wrapper > div > div {
     float: left;
@@ -298,14 +298,18 @@ li.disabled > a {
 }
 
 .edit-amount-confirmation {
-  width: 350px !important;
   margin: 0 auto;
-  display: flex !important;
+  max-width: 350px;
+  display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   justify-content: space-between;
+  & > * {
+    flex: 0 0 max-content;
+  }
 }
 
-/* 
+/*
  * We currently cannot reuse the Button component from `ui-components`
  * and are using the native `<button>` with custom CSS.
  * This implementation is temporary until we can find a solution for this button use case.
@@ -528,7 +532,7 @@ a.patreon-button:hover {
   display: none;
 }
 
-/* 
+/*
  * We currently cannot reuse the Button component from `ui-components`
  * and are using the native `<button>` with custom CSS.
  * This implementation is temporary until we can find a solution for this button use case.
@@ -646,7 +650,7 @@ a.patreon-button:hover {
   margin-bottom: 2px;
 }
 
-/* 
+/*
  * We currently cannot reuse the Button component from `ui-components`
  * and are using the native `<button>` with custom CSS.
  * This implementation is temporary until we can find a solution for this button use case.