From 87b61f7cfff19d79038ad1e292668018b7cec399 Mon Sep 17 00:00:00 2001
From: LenAnderson <Anderson.Len@outlook.com>
Date: Wed, 15 May 2024 08:27:22 -0400
Subject: [PATCH] fix QR editor on narrow screen

---
 public/scripts/extensions/quick-reply/style.css  | 6 +++++-
 public/scripts/extensions/quick-reply/style.less | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/public/scripts/extensions/quick-reply/style.css b/public/scripts/extensions/quick-reply/style.css
index 1afd83ce4..d9811993d 100644
--- a/public/scripts/extensions/quick-reply/style.css
+++ b/public/scripts/extensions/quick-reply/style.css
@@ -218,11 +218,15 @@
 @media screen and (max-width: 750px) {
   body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor {
     flex-direction: column;
+    overflow: auto;
+  }
+  body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main {
+    flex: 0 0 auto;
   }
   body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels {
     flex-direction: column;
   }
-  body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-message {
+  body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
     min-height: 90svh;
   }
 }
diff --git a/public/scripts/extensions/quick-reply/style.less b/public/scripts/extensions/quick-reply/style.less
index ca4f385ba..bec986978 100644
--- a/public/scripts/extensions/quick-reply/style.less
+++ b/public/scripts/extensions/quick-reply/style.less
@@ -244,10 +244,14 @@
 @media screen and (max-width: 750px) {
 	body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor {
 		flex-direction: column;
+		overflow: auto;
+		> #qr--main {
+			flex: 0 0 auto;
+		}
 		> #qr--main > .qr--labels {
 			flex-direction: column;
 		}
-		> #qr--main > .qr--modal-messageContainer > #qr--modal-message {
+		> #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
 			min-height: 90svh;
 		}
 	}