Merge pull request #62 from Freegle/bugfix/chat-page-scrolls-down

Fix issue with right sidebar when ads is visible
Freegle · Feb 14, 2024 · 9c5892d · 9c5892d
2 parents 0556cc2 + f9c6042
commit 9c5892d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/assets/css/global.scss b/assets/css/global.scss
@@ -248,7 +248,7 @@ legend {
 }
 
 .sidebar__wrapper {
-  height: calc(100vh - 68px);
+  height: calc(100vh - var(--header-navbar-height) - var(--ads-label-height));
 
   .card-body .card {
     border-radius: unset;
@@ -566,4 +566,7 @@ label {
   --popper-theme-border-radius: 6px;
   --popper-theme-padding: 10px;
   --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
-}
+  --ads-height: 258px;
+  --ads-label-height: 42px;
+  --header-navbar-height: 76px;
+}
diff --git a/components/ExternalDa.vue b/components/ExternalDa.vue
@@ -10,8 +10,8 @@
         :ref="adUnitPath"
         :key="'adUnit-' + adUnitPath"
         :style="{
-          width: dimensions[0] + 'px',
-          height: dimensions[1] + 'px',
+          'max-width': dimensions[0] + 'px',
+          'max-height': dimensions[1] + 'px',
         }"
       />
     </div>

diff --git a/pages/chats/[[id]].vue b/pages/chats/[[id]].vue
@@ -187,12 +187,16 @@
           </VisibleWhen>
         </b-col>
         <b-col cols="0" xl="3" class="p-0 pl-1">
-          <VisibleWhen :at="['xl', 'xxl']">
+          <VisibleWhen
+            :at="['xl', 'xxl']"
+            :class="[adsVisible && 'sidebar-with-ads']"
+          >
             <ExternalDa
               ad-unit-path="/22794232631/freegle_chat_desktop"
               :dimensions="[300, 250]"
               div-id="div-gpt-ad-1692867596111-0"
               class="mt-2"
+              @rendered="adsVisible = $event"
             />
             <SidebarRight :show-job-opportunities="true" />
           </VisibleWhen>
@@ -322,6 +326,7 @@ export default {
       distance: 1000,
       selectedChatId: null,
       showClosed: false,
+      adsVisible: false,
     }
   },
   computed: {
@@ -566,4 +571,11 @@ export default {
 .closedCount {
   border-radius: 50%;
 }
+
+.sidebar-with-ads .sidebar__wrapper {
+  height: calc(
+    100vh - var(--ads-height) - var(--ads-label-height) -
+      var(--header-navbar-height)
+  );
+}
 </style>