From caa7b5a63a1dd3a1e3ba6a8caa19462edf90e438 Mon Sep 17 00:00:00 2001
From: Ben Halpern <bendhalpern@gmail.com>
Date: Mon, 19 Feb 2024 18:48:50 -0800
Subject: [PATCH] [Hot fix] Fix style bugs with registration page (#20656)

* Fix style bugs with registration page

* Small additonal style tweak

* Final style tweak
---
 app/assets/stylesheets/billboards.scss              | 13 ++++++++++++-
 .../registrations/_registration_form.html.erb       | 13 +++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/billboards.scss b/app/assets/stylesheets/billboards.scss
index 0a62b2a2a..524751aff 100644
--- a/app/assets/stylesheets/billboards.scss
+++ b/app/assets/stylesheets/billboards.scss
@@ -60,12 +60,23 @@
   .text-styles {
     padding-top: var(--su-4);
     padding-bottom: var(--su-4);
-    font-size: 1.2em;
+    font-size: calc(0.7em + 1vw);
+    max-width: calc(var(--site-width) - var(--su-8));
   }
   .sponsorship-dropdown {
     top: auto;
     bottom: var(--su-8);
   }
+  @media (min-width: $breakpoint-xl) {
+    .crayons-sponsorship__header,
+    .text-styles {
+      margin-left: calc(50% - (var(--site-width) / 2));
+    }
+  }
+}
+
+.hide-popover-billboard .popover-billboard {
+  display: none;
 }
 
 .hero-billboard {
diff --git a/app/views/devise/registrations/_registration_form.html.erb b/app/views/devise/registrations/_registration_form.html.erb
index 8a66d614a..2513a0d68 100644
--- a/app/views/devise/registrations/_registration_form.html.erb
+++ b/app/views/devise/registrations/_registration_form.html.erb
@@ -85,8 +85,8 @@
 </section>
 
 <script>
-  const registrationsPage = document.querySelector('.js-registration');
-  const topbarElement = document.querySelector('#topbar');
+  let registrationsPage = document.querySelector('.js-registration');
+  let topbarElement = document.querySelector('#topbar');
   // Check if the registrations or notifications element exists and the topbar element exists.
   if ((registrationsPage && topbarElement) || (notificationsPage && topbarElement)) {
       topbarElement.style.display = 'none';
@@ -94,4 +94,13 @@
       // This is needed to make sure that the bottom part of page is white when screen is zoomed-out.
       document.body.style.backgroundColor = 'white';
   }
+  // Reverse the above when the back button is clicked.
+  window.addEventListener('popstate', () => {
+    if (registrationsPage && topbarElement) {
+      topbarElement.style.display = 'block';
+      document.body.style.removeProperty('padding-top');
+      document.body.style.removeProperty('background-color');
+      document.body.classList.add('hide-popover-billboard');
+    }
+  });
 </script>