From c42819c6b4faf1cac731f0bc18ce85481bdc6de8 Mon Sep 17 00:00:00 2001
From: Lucas <hello@lucascm.dev>
Date: Mon, 23 Sep 2024 07:26:52 +0100
Subject: [PATCH] Layout and spacing improvements to popup banner

---
 app/assets/stylesheets/responsive/_popups_layout.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/responsive/_popups_layout.scss b/app/assets/stylesheets/responsive/_popups_layout.scss
index 61db222f52..e95dce72eb 100644
--- a/app/assets/stylesheets/responsive/_popups_layout.scss
+++ b/app/assets/stylesheets/responsive/_popups_layout.scss
@@ -9,20 +9,24 @@
 .popup__close {
   position: absolute;
   display: inline-block;;
-  top: -0.25em;
+  top: 50%;
+  transform: translateY(-50%); // positions the icon vertically in the middle of the banner.
   right: 0.9375rem; // equal to the padding of .popup minus padding
   z-index: 50;
   padding: 0.5em;
+  font-size: 1.5rem; // The element's clickable area is big enough
 }
 
 .popup__content {
 
     padding-top: 1em;
     padding-bottom: 1em;
+    text-align: center;
     @include grid-column(12);
+    padding-right: 2.5rem; // No overlapping with the close button in smaller screens
     @include ie8{
       padding-left: 0.9375em;
-      padding-right: 0.9375em;
+      padding-right: 2.5rem;
     }
 }