From 40536590898e0380d90be4e4a0c04e2f81db2c79 Mon Sep 17 00:00:00 2001
From: Piyush <chandra.piyush17@gmail.com>
Date: Fri, 7 Jun 2024 14:09:27 +0530
Subject: [PATCH 1/2] Fix searchbox fit overlays on mobile

---
 client/modules/App/components/Overlay.jsx | 8 +++++++-
 client/styles/components/_overlay.scss    | 4 ++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 45a6ae9176..1badcd7c11 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/client/modules/App/components/Overlay.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useRef } from 'react';
+import MediaQuery from 'react-responsive';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -54,7 +55,7 @@ const Overlay = ({
           <header className="overlay__header">
             <h2 className="overlay__title">{title}</h2>
             <div className="overlay__actions">
-              {actions}
+              <MediaQuery minWidth={770}>{actions}</MediaQuery>
               <button
                 className="overlay__close-button"
                 onClick={close}
@@ -64,6 +65,11 @@ const Overlay = ({
               </button>
             </div>
           </header>
+          <MediaQuery maxWidth={650}>
+            {actions && (
+              <div className="overlay__actions-mobile">{actions}</div>
+            )}
+          </MediaQuery>
           {children}
         </section>
       </div>
diff --git a/client/styles/components/_overlay.scss b/client/styles/components/_overlay.scss
index c8b720a841..8b23b383c4 100644
--- a/client/styles/components/_overlay.scss
+++ b/client/styles/components/_overlay.scss
@@ -51,6 +51,10 @@
   display: flex;
 }
 
+.overlay__actions-mobile {
+  padding-left: #{24/ $base-font-size}rem;
+}
+
 .overlay__title {
   font-size: #{math.div(21, $base-font-size)}rem;
 }

From 919f82420ee9b813cb0957b78e03bdde5a682fe8 Mon Sep 17 00:00:00 2001
From: Piyush <chandra.piyush17@gmail.com>
Date: Sat, 8 Jun 2024 00:20:46 +0530
Subject: [PATCH 2/2] updated maxWidth to 769px

---
 client/modules/App/components/Overlay.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 1badcd7c11..2dedc82656 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/client/modules/App/components/Overlay.jsx
@@ -65,7 +65,7 @@ const Overlay = ({
               </button>
             </div>
           </header>
-          <MediaQuery maxWidth={650}>
+          <MediaQuery maxWidth={769}>
             {actions && (
               <div className="overlay__actions-mobile">{actions}</div>
             )}