Fixed auto height bug on Firefox where the banner would fill 100% height

website/macos-big-sur-icons/src/components/StickyBanner.vue

@@ -1,47 +1,49 @@
 <template>
-  <div id="stickyBanner" class="sticky-banner card-wrapper card-hover coral-card">
-
-    <div class="lgbt-wrapper">
-
-      <svg @click="closeBanner" class="icon icon-absolute" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 12 12" width="12">
-        <title>CrossLarge</title>
-        <rect id="ToDelete" fill="#ff13dc" opacity="0" width="12" height="12" /><path d="M11.69673,10.28266,7.41406,6l4.28267-4.28266A.9999.9999,0,1,0,10.28266.30327L6,4.58594,1.71734.30327A.9999.9999,0,1,0,.30327,1.71734L4.58594,6,.30327,10.28266a.9999.9999,0,1,0,1.41407,1.41407L6,7.41406l4.28266,4.28267a.9999.9999,0,1,0,1.41407-1.41407Z" />
-      </svg>
-
-      <img class="lgbt-img" :src="imgs.lgbt" alt="">
+  <div id="stickyBanner">
+    <div class="sticky-banner card-wrapper card-hover coral-card">
 
-      <div class="lgbt-text">
+      <div class="lgbt-wrapper">
 
-        <!-- <h2 class="coral-Heading--S m-5">
-          Support
-        </h2> -->
+        <svg @click="closeBanner" class="icon icon-absolute" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 12 12" width="12">
+          <title>CrossLarge</title>
+          <rect id="ToDelete" fill="#ff13dc" opacity="0" width="12" height="12" /><path d="M11.69673,10.28266,7.41406,6l4.28267-4.28266A.9999.9999,0,1,0,10.28266.30327L6,4.58594,1.71734.30327A.9999.9999,0,1,0,.30327,1.71734L4.58594,6,.30327,10.28266a.9999.9999,0,1,0,1.41407,1.41407L6,7.41406l4.28266,4.28267a.9999.9999,0,1,0,1.41407-1.41407Z" />
+        </svg>
+
+        <img class="lgbt-img" :src="imgs.lgbt" alt="">
 
-        <p class="coral-Body--M">
-          50% of the ad revenue and donations this month will be donated to
+        <div class="lgbt-text">
+
+          <!-- <h2 class="coral-Heading--S m-5">
+            Support
+          </h2> -->
+
+          <p class="coral-Body--M">
+            50% of the ad revenue and donations this month will be donated to
+            <a rel="noopener"
+              class="coral-Link"
+              href="https://www.stonewall.org.uk/"
+              target="_blank"
+            > 
+              Stonewall.
+            </a>
+          </p>
+
           <a rel="noopener"
             class="coral-Link"
-            href="https://www.stonewall.org.uk/"
+            href="https://www.paypal.com/donate?hosted_button_id=5PMNX4DPW83KN"
             target="_blank"
-          > 
-            Stonewall.
+
+          >
+            <button @click="adClick" is="coral-button" variant="CTA">
+                Show your support
+            </button>
           </a>
-        </p>
 
-        <a rel="noopener"
-          class="coral-Link"
-          href="https://www.paypal.com/donate?hosted_button_id=5PMNX4DPW83KN"
-          target="_blank"
-
-        >
-          <button @click="adClick" is="coral-button" variant="CTA">
-              Show your support
-          </button>
-        </a>
+        </div>
 
       </div>
 
     </div>
-
   </div>
 </template>
 
@@ -133,10 +135,11 @@ export default {
 
   .sticky-banner{
     position: fixed !important;
-    height: fit-content !important;
+    height: auto !important;
     width: 100%;
     max-width: 430px !important;
-    padding: 15px 10px;
+    max-height: 180px !important;
+    padding: 15px 10px 20px 10px;
     bottom: 20px;
     right: 20px;
     z-index: 9;
@@ -156,6 +159,10 @@ export default {
   .lgbt-img{
     width: 70px;
   }
+
+  #stickyBanner .card-hover:hover {
+    transform: translateX(50%) !important;  
+  }
 }
 
 </style>

website/macos-big-sur-icons/src/components/app.less

@@ -1728,6 +1728,8 @@ option[value=""][disabled] {
         padding-top: 50px
     }
 
+
+
     .main-search{
         width: 100%;
     }