fix(banners): account for privacy in snackbar position

HabitRPG · Jan 16, 2025 · e544535 · e544535
1 parent d7fb1e2
commit e544535
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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();