From 1c6671df316ae553ff223fc5fbd19af87982d7ec Mon Sep 17 00:00:00 2001
From: Wolfsblvt <wolfsblvt@gmx.de>
Date: Thu, 30 May 2024 21:03:52 +0200
Subject: [PATCH] popup fix scrollbar style, align toastr

---
 public/index.html       |  4 ++--
 public/scripts/popup.js |  2 ++
 public/style.css        | 41 ++++++++++++++++++++++++++++++++++-------
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index 2c0fba520..80428784d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4849,7 +4849,7 @@
     <!-- various fullscreen popups -->
     <template id="shadow_popup_template" data-i18n="[popup_text_save]popup_text_save;[popup_text_yes]popup_text_yes;[popup_text_no]popup_text_no;[popup_text_cancel]popup_text_cancel;[popup_text_import]popup_text_import" popup_text_save="Save" popup_text_yes="Yes" popup_text_no="No" popup_text_cancel="Cancel" popup_text_import="Import"> <!-- localization data holder for popups -->
         <dialog class="dialogue_popup shadow_popup">
-
+            <div class="popup_content">
                 <div class="dialogue_popup_text">
                     <h3 class="margin0">text</h3>
                 </div>
@@ -4858,7 +4858,7 @@
                     <div class="dialogue_popup_ok menu_button result_control" data-i18n="Delete" data-result="1" tabindex="0">Delete</div>
                     <div class="dialogue_popup_cancel menu_button result_control" data-i18n="Cancel" data-result="0" tabindex="0">Cancel</div>
                 </div>
-
+            </div>
         </dialog>
     </template>
     <div id="shadow_popup">
diff --git a/public/scripts/popup.js b/public/scripts/popup.js
index 04e7c5acb..fdb5dc383 100644
--- a/public/scripts/popup.js
+++ b/public/scripts/popup.js
@@ -49,6 +49,7 @@ export class Popup {
     /** @type {string} */ id;
 
     /** @type {HTMLDialogElement} */ dlg;
+    /** @type {HTMLElement} */ content;
     /** @type {HTMLElement} */ text;
     /** @type {HTMLTextAreaElement} */ input;
     /** @type {HTMLElement} */ controls;
@@ -84,6 +85,7 @@ export class Popup {
         const template = document.querySelector('#shadow_popup_template');
         // @ts-ignore
         this.dlg = template.content.cloneNode(true).querySelector('.dialogue_popup');
+        this.content = this.dlg.querySelector('.popup_content');
         this.text = this.dlg.querySelector('.dialogue_popup_text');
         this.input = this.dlg.querySelector('.dialogue_popup_input');
         this.controls = this.dlg.querySelector('.dialogue_popup_controls');
diff --git a/public/style.css b/public/style.css
index f28483f43..afe84121f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3064,8 +3064,9 @@ dialog {
     border-radius: 10px;
     display: flex;
     flex-direction: column;
-    overflow-y: hidden;
-    overflow-x: hidden;
+
+    /* Overflow visible so elements (like toasts) can appear outside of the dialog. '.popup_content' is hiding overflow for the real content. */
+    overflow: visible;
 
     /* Fix weird animation issue with font-scaling during popup open */
     backface-visibility: hidden;
@@ -3073,6 +3074,25 @@ dialog {
     -webkit-font-smoothing: subpixel-antialiased;
 }
 
+.dialogue_popup .popup_content {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.dialogue_popup .dialogue_popup_text {
+    padding: 0 8px;
+    overflow: hidden;
+}
+
+.dialogue_popup.vertical_scrolling_dialogue_popup .dialogue_popup_text {
+    overflow-y: auto;
+}
+
+.dialogue_popup.horizontal_scrolling_dialogue_popup .dialogue_popup_text {
+    overflow-x: auto;
+}
+
 /* Open state of the dialog */
 .dialogue_popup[open] {
     animation: pop-in var(--animation-duration-slow) ease-in-out;
@@ -3108,7 +3128,7 @@ dialog {
         transform: scaleY(0);
     }
 
-    /** Make the scaling faster on pop-in, otherwise it looks a bit weird **/
+    /* Make the scaling faster on pop-in, otherwise it looks a bit weird */
     33% {
         transform: scaleY(1);
     }
@@ -3131,6 +3151,14 @@ dialog {
     }
 }
 
+/* Fix toastr in dialogs by actually placing it at the top of the screen via transform */
+.dialogue_popup #toast-container {
+    height: 100svh;
+    top: calc(50% + var(--topBarBlockSize));
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
 .rm_stat_block {
     display: flex;
     justify-content: space-between;
@@ -3153,11 +3181,11 @@ dialog {
     min-width: 750px;
 }
 
-.horizontal_scrolling_dialogue_popup {
+#dialogue_popup .horizontal_scrolling_dialogue_popup {
     overflow-x: unset !important;
 }
 
-.vertical_scrolling_dialogue_popup {
+#dialogue_popup .vertical_scrolling_dialogue_popup {
     overflow-y: unset !important;
 }
 
@@ -3170,8 +3198,7 @@ dialog {
     padding: 0 10px;
 }
 
-#dialogue_popup_text,
-.dialogue_popup_text {
+#dialogue_popup_text {
     flex-grow: 1;
     overflow-y: auto;
     height: 100%;