From e97365f43425f1e6cb15d3eabe241c9451b43309 Mon Sep 17 00:00:00 2001
From: Dave Shoreman <dshoreman@users.noreply.github.com>
Date: Fri, 20 Dec 2024 08:43:14 +0000
Subject: [PATCH] Fix back/close button display in Nordigen modal

When the country filtering mode is enabled, it adds a "Go back" button
but the close button is right on top of it. This moves the close button
to the right to avoid any click conflicts.

To fix an annoying display bug with the top offset, an observer is used
to override the default `display: none` of the back button to keep its
flex mode but with a hidden visibility so the UI doesn't move around.
---
 .../views/bank/nordigen/handler.blade.php      | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/resources/views/bank/nordigen/handler.blade.php b/resources/views/bank/nordigen/handler.blade.php
index 6bbb08ae96..5a3d377e51 100644
--- a/resources/views/bank/nordigen/handler.blade.php
+++ b/resources/views/bank/nordigen/handler.blade.php
@@ -4,6 +4,9 @@
 @push('head')
 
 <link href="https://unpkg.com/nordigen-bank-ui@1.5.2/package/src/selector.min.css" rel="stylesheet" />
+<style type="text/css">
+.institution-modal-close { left: calc(100% - 12px); }
+</style>
 
 @endpush
 
@@ -167,6 +170,21 @@
         returnButton.innerHTML = `<a class="button button-primary bg-blue-600 my-4" href="${restartFlow ? restartUrl.href : config.redirectUrl}">${restartFlow ? "{{ ctrans('texts.nordigen_handler_restart', [], $lang ?? 'en') }}" : "{{ ctrans('texts.nordigen_handler_return', [], $lang ?? 'en') }}"}</a>`
         wrapper.appendChild(returnButton);
     }
+
+    const backButton = document.querySelector('.institution-arrow-block');
+    const backButtonObserver = new MutationObserver((records) => {
+        const title = document.querySelector('#institution-modal-header h2').innerText;
+
+        backButton.style.visibility = title == 'Select your country' ? 'hidden' : 'visible';
+        backButton.style.display = 'flex';
+    });
+
+    backButton.style.display = 'flex';
+    backButton.style.visibility = 'hidden';
+
+    backButtonObserver.observe(document.querySelector('header h2'), {
+        childList: true,
+    });
 </script>
 
 @endpush