From e5445353a162a857abb4826c56ab1f996716e809 Mon Sep 17 00:00:00 2001
From: Kalista Payne <sabrecat@gmail.com>
Date: Wed, 15 Jan 2025 22:44:08 -0600
Subject: [PATCH] fix(banners): account for privacy in snackbar position

---
 website/client/src/components/header/banners/privacy.vue | 5 ++++-
 .../client/src/components/snackbars/notifications.vue    | 9 +++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/website/client/src/components/header/banners/privacy.vue b/website/client/src/components/header/banners/privacy.vue
index 3cce08ef617..f94e4da330c 100644
--- a/website/client/src/components/header/banners/privacy.vue
+++ b/website/client/src/components/header/banners/privacy.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="banner d-flex align-items-center justify-content-between py-3 px-4">
+  <div
+    class="banner d-flex align-items-center justify-content-between py-3 px-4"
+    id="privacy-banner"
+  >
     <p
       class="mr-3 mb-0"
       v-html="$t('privacyOverview') + ' ' + $t('learnMorePrivacy')"
diff --git a/website/client/src/components/snackbars/notifications.vue b/website/client/src/components/snackbars/notifications.vue
index 9bec411ab2c..b003c73eb8a 100644
--- a/website/client/src/components/snackbars/notifications.vue
+++ b/website/client/src/components/snackbars/notifications.vue
@@ -96,6 +96,7 @@ export default {
       notificationTopY: '0px',
       preventMultipleWatchExecution: false,
       eventPromoBannerHeight: null,
+      privacyBannerHeight: null,
       sleepingBannerHeight: null,
       warningBannerHeight: null,
     };
@@ -114,6 +115,10 @@ export default {
     notificationBannerHeight () {
       let scrollPosToCheck = 56;
 
+      if (this.privacyBannerHeight) {
+        scrollPosToCheck += this.privacyBannerHeight;
+      }
+
       if (this.warningBannerHeight) {
         scrollPosToCheck += this.warningBannerHeight;
       }
@@ -164,6 +169,9 @@ export default {
     window.addEventListener('scroll', this.updateScrollY, {
       passive: true,
     });
+    window.addEventListener('resize', this.updateBannerHeightAndScrollY, {
+      passive: true,
+    });
 
     this.$root.$on(EVENTS.BANNER_HEIGHT_UPDATED, () => {
       this.updateBannerHeightAndScrollY();
@@ -339,6 +347,7 @@ export default {
 
     updateBannerHeightAndScrollY () {
       this.updateEventBannerHeight();
+      this.privacyBannerHeight = document.getElementById('privacy-banner').getBoundingClientRect().height;
       this.warningBannerHeight = getBannerHeight('chat-warning');
       this.sleepingBannerHeight = getBannerHeight('damage-paused');
       this.updateScrollY();