Various fixes for Waterfox Classic (#1974)

src/components/common/helpers/renderText.tsx

@@ -131,7 +131,7 @@ function replaceEmojis(textParts: TextPart[], size: 'big' | 'small', type: 'jsx'
         emojiResult.push(
           // For preventing extra spaces in html
           // eslint-disable-next-line max-len
-          `<img draggable="false" class="${className}" src="./img-apple-${size === 'big' ? '160' : '64'}/${code}.png" alt="${emoji}" />`,
+          `<img draggable="false" contenteditable="false" class="${className}" src="./img-apple-${size === 'big' ? '160' : '64'}/${code}.png" alt="${emoji}" />`,
         );
       }
 

src/components/main/Main.scss

@@ -118,6 +118,12 @@
     transform: translate3d(-20vw, 0, 0);
     left: env(safe-area-inset-left) !important;
     width: calc(100vw - env(safe-area-inset-left)) !important;
+
+    // Target: Old Firefox (Waterfox Classic)
+    @supports not (left: env(safe-area-inset-left)) {
+      left: 0 !important;
+      width: 100vw !important;
+    }
   }
 }
 

src/components/main/premium/PremiumFeatureModal.module.scss

@@ -39,8 +39,14 @@
 }
 
 .frame {
-  aspect-ratio: 1/1;
+  aspect-ratio: 1;
+
+  @supports not (aspect-ratio: 1) {
+    height: 0;
+    padding-bottom: 100%;
+  }
 }
+
 .slide {
   width: 100%;
   flex: none;
@@ -83,10 +89,15 @@
   margin: 0 -1rem;
   margin-top: -1rem;
   background: var(--premium-feature-background);
-  aspect-ratio: 1/1;
+  aspect-ratio: 1;
   width: 100%;
   border-top-right-radius: var(--border-radius-default);
   border-top-left-radius: var(--border-radius-default);
+
+  @supports not (aspect-ratio: 1) {
+    height: 0;
+    padding-bottom: 100%;
+  }
 }
 
 .title {

src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss

@@ -1,9 +1,14 @@
 .root {
-display: flex;
+  display: flex;
   justify-content: center;
   aspect-ratio: 1;
   overflow: hidden;
   position: relative;
+
+  @supports not (aspect-ratio: 1) {
+    height: 0;
+    padding-bottom: 100%;
+  }
 }
 
 .wrapper {
@@ -26,6 +31,10 @@ display: flex;
     )
     rotateY(calc(var(--scroll-progress-converted) * 40deg));
   opacity: calc(1 - var(--abs-scroll-progress-converted) * 0.4);
+
+  @supports not (aspect-ratio: 1) {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.005, 0, -342.2, 0, 1)
+  }
 }
 
 .down {
@@ -54,8 +63,10 @@ display: flex;
   border-radius: 0 0 10% 10%;
 }
 
-.down .video {
+@supports (aspect-ratio: 1) {
-  top: 0;
+  .down .video {
-  bottom: initial;
+    top: 0;
-  border-radius: 10% 10% 0 0;
+    bottom: initial;
+    border-radius: 10% 10% 0 0;
+  }
 }

src/components/mediaViewer/MediaViewer.scss

@@ -88,6 +88,15 @@
         margin-right: 1.5rem;
       }
     }
+
+    // Target: Old Firefox (Waterfox Classic)
+    @supports not (padding: 0.5rem max(1.25rem, env(safe-area-inset-left))) {
+      padding: 0.5rem 1.25rem;
+
+      @media (max-width: 600px) {
+        padding: 0.5rem;
+      }
+    }
   }
 
   & > .Transition,
@@ -144,6 +153,16 @@
         right: env(safe-area-inset-right);
         transform: scaleX(-1);
       }
+
+      // Target: Old Firefox (Waterfox Classic)
+      @supports not (left: env(safe-area-inset-left)) {
+        left: 0;
+
+        &[dir="rtl"] {
+          left: auto;
+          right: 0;
+        }
+      }
     }
 
     &.next {
@@ -156,6 +175,16 @@
         left: env(safe-area-inset-left);
         transform: scaleX(-1);
       }
+
+      // Target: Old Firefox (Waterfox Classic)
+      @supports not (right: env(safe-area-inset-right)) {
+        right: 0;
+
+        &[dir="rtl"] {
+          right: auto;
+          left: 0;
+        }
+      }
     }
 
     &.inline {

src/components/middle/FloatingActionButtons.module.scss

@@ -29,6 +29,18 @@
     }
   }
 
+  // Target: Old Firefox (Waterfox Classic)
+  @supports not (right: max(1rem, env(safe-area-inset-right))) {
+    right: 1rem;
+    @media (max-width: 600px) {
+      right: 0.5rem;
+
+      :global(body:not(.keyboard-visible)) & {
+        bottom: 4.5rem;
+      }
+    }
+  }
+
   &.revealed {
     transform: translateY(0);
     opacity: 1;

src/components/middle/MessageList.scss

@@ -37,6 +37,11 @@
     position: relative;
     bottom: calc(0px - env(safe-area-inset-bottom));
 
+    // Target: Old Firefox (Waterfox Classic)
+    @supports not (bottom: calc(0px - env(safe-area-inset-bottom))) {
+      bottom: 0;
+    }
+
     body.keyboard-visible.animation-level-0 & {
       transition: none !important;
     }

src/components/middle/MessageSelectToolbar.scss

@@ -8,6 +8,11 @@
   justify-content: center;
   margin: 0;
 
+  // Target: Old Firefox (Waterfox Classic)
+  @supports not (bottom: calc(0.5rem + env(safe-area-inset-bottom))) {
+    bottom: 0.5rem;
+  }
+
   .mask-image-disabled &::before {
     left: auto !important;
     right: auto !important;

src/components/middle/MiddleColumn.scss

@@ -189,6 +189,11 @@
       body.keyboard-visible & {
         top: env(safe-area-inset-bottom);
       }
+
+      // Target: Old Firefox (Waterfox Classic)
+      @supports not (padding-bottom: env(safe-area-inset-bottom)) {
+        padding-bottom: 0;
+      }
     }
 
     &::before {
@@ -316,7 +321,12 @@
   }
 
   @media (max-width: 600px) {
-    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
+    padding-bottom: 0.75rem;
+
+    // Target: Old Firefox (Waterfox Classic)
+    @supports (padding-bottom: calc(0.75rem + env(safe-area-inset-bottom))) {
+      padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
+    }
   }
 
   .mask-image-disabled &::before {

src/components/middle/MiddleHeader.scss

@@ -18,6 +18,12 @@
     padding-right: max(0.5rem, env(safe-area-inset-right));
     background: var(--color-background);
 
+    // Target: Old Firefox (Waterfox Classic)
+    @supports not (padding-left: max(0.75rem, env(safe-area-inset-left))) {
+      padding-left: 0.75rem;
+      padding-right: 0.5rem;
+    }
+
     &::before {
       content: "";
       display: block;
@@ -94,6 +100,17 @@
     padding-right: max(0.5rem, env(safe-area-inset-right));
   }
 
+  // Target: Old Firefox (Waterfox Classic)
+  @supports not (padding-left: max(1.5rem, env(safe-area-inset-left))) {
+    padding-left: 1.5rem;
+    padding-right: 0.8125rem;
+
+    @media (max-width: 600px) {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
+  }
+
   .Transition {
     width: 100%;
     // https://dfmcphee.com/flex-items-and-min-width-0/

src/components/middle/MobileSearch.scss

@@ -15,6 +15,12 @@
     margin-left: 0.25rem;
     flex: 1;
   }
+
+  // Target: Old Firefox (Waterfox Classic)
+  @supports not (padding-left: max(0.25rem, env(safe-area-inset-left))) {
+    padding-left: 0.25rem;
+    padding-right: 0.5rem;
+  }
 }
 
 #MobileSearch > .footer {
@@ -35,6 +41,17 @@
     height: calc(3.5rem + env(safe-area-inset-bottom));
   }
 
+  // Target: Old Firefox (Waterfox Classic)
+  @supports not (padding-left: max(1rem, env(safe-area-inset-left))) {
+    padding-left: 1rem;
+    padding-right: 0.5rem;
+
+    body:not(.keyboard-visible) & {
+      padding-bottom: 0;
+      height: 3.5rem;
+    }
+  }
+
   > .counter {
     flex: 1;
     color: var(--color-text-secondary);

src/components/middle/composer/Composer.scss

@@ -8,6 +8,11 @@
     padding-right: 2rem;
     bottom: env(safe-area-inset-bottom);
 
+    // Target: Old Firefox (Waterfox Classic)
+    @supports not (bottom: env(safe-area-inset-bottom)) {
+      bottom: 0;
+    }
+
     @media (max-width: 600px) {
       padding-right: 1rem;
     }

src/components/middle/composer/SymbolMenu.scss

@@ -27,6 +27,14 @@
       }
     }
 
+    // Target: Old Firefox (Waterfox Classic)
+    @supports not (padding-right: env(safe-area-inset-right)) {
+      padding-right: 0;
+      padding-bottom: 0;
+      padding-left: 0;
+      transform: translate3d(0, calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height)), 0);
+    }
+
     body.animation-level-0 & {
       transition: none;
     }
@@ -39,6 +47,11 @@
   &-main {
     height: var(--symbol-menu-height);
     max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom));
+
+    // Target: Old Firefox (Waterfox Classic)
+    @supports not (max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom))) {
+      max-height: calc(100vh - var(--symbol-menu-footer-height));
+    }
   }
 
   &-footer {
@@ -133,8 +146,14 @@
   .symbol-close-button {
     display: none;
     position: absolute;
-    right: max(calc(0.25rem), env(safe-area-inset-right));
+    right: max(0.25rem, env(safe-area-inset-right));
-    top: max(calc(0.25rem), env(safe-area-inset-top));
+    top: max(0.25rem, env(safe-area-inset-top));
+
+    // Target: Old Firefox (Waterfox Classic)
+    @supports not (right: max(0.25rem, env(safe-area-inset-right))) {
+      right: 0.25rem;
+      top: 0.25rem;
+    }
   }
 
   @media (orientation: landscape) {

src/components/middle/message/Game.scss

@@ -30,5 +30,10 @@
 
   .skeleton {
     aspect-ratio: 16/9;
+
+    @supports not (aspect-ratio: 16/9) {
+      height: 0 !important;
+      padding-bottom: 56.25%;
+    }
   }
 }

src/components/right/RightColumn.scss

@@ -12,6 +12,11 @@
 
   transition: transform var(--layer-transition);
 
+  // Target: Old Firefox (Waterfox Classic)
+  @supports not (padding-right: env(safe-area-inset-right)) {
+    padding-right: 0;
+  }
+
   body.animation-level-0 & {
     transition: none;
   }