diff --git a/src/components/common/helpers/renderText.tsx b/src/components/common/helpers/renderText.tsx
index 6c002a26f..8d3f4e780 100644
--- a/src/components/common/helpers/renderText.tsx
+++ b/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
- `
`,
+ `
`,
);
}
diff --git a/src/components/main/Main.scss b/src/components/main/Main.scss
index 27ba295b3..a4fbdf060 100644
--- a/src/components/main/Main.scss
+++ b/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;
+ }
}
}
diff --git a/src/components/main/premium/PremiumFeatureModal.module.scss b/src/components/main/premium/PremiumFeatureModal.module.scss
index 54ddf4198..40b70af58 100644
--- a/src/components/main/premium/PremiumFeatureModal.module.scss
+++ b/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 {
diff --git a/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss b/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss
index 66732fba5..cd7dff089 100644
--- a/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss
+++ b/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 {
- top: 0;
- bottom: initial;
- border-radius: 10% 10% 0 0;
+@supports (aspect-ratio: 1) {
+ .down .video {
+ top: 0;
+ bottom: initial;
+ border-radius: 10% 10% 0 0;
+ }
}
diff --git a/src/components/mediaViewer/MediaViewer.scss b/src/components/mediaViewer/MediaViewer.scss
index 8e9418890..31342b533 100644
--- a/src/components/mediaViewer/MediaViewer.scss
+++ b/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 {
diff --git a/src/components/middle/FloatingActionButtons.module.scss b/src/components/middle/FloatingActionButtons.module.scss
index 3d42bc6ff..675e2cb84 100644
--- a/src/components/middle/FloatingActionButtons.module.scss
+++ b/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;
diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss
index ff3d15cf3..15625b7db 100644
--- a/src/components/middle/MessageList.scss
+++ b/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;
}
diff --git a/src/components/middle/MessageSelectToolbar.scss b/src/components/middle/MessageSelectToolbar.scss
index 271f04313..2130dcc9a 100644
--- a/src/components/middle/MessageSelectToolbar.scss
+++ b/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;
diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss
index a596abbc9..7618f0c46 100644
--- a/src/components/middle/MiddleColumn.scss
+++ b/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 {
diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss
index 3cec246f8..cc75fedbb 100644
--- a/src/components/middle/MiddleHeader.scss
+++ b/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/
diff --git a/src/components/middle/MobileSearch.scss b/src/components/middle/MobileSearch.scss
index cb4658a1d..bf96ea1c0 100644
--- a/src/components/middle/MobileSearch.scss
+++ b/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);
diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss
index 5e1badb42..dbf0e4f8e 100644
--- a/src/components/middle/composer/Composer.scss
+++ b/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;
}
diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss
index ce91c14fe..750dd0e8e 100644
--- a/src/components/middle/composer/SymbolMenu.scss
+++ b/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));
- top: max(calc(0.25rem), env(safe-area-inset-top));
+ right: max(0.25rem, env(safe-area-inset-right));
+ 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) {
diff --git a/src/components/middle/message/Game.scss b/src/components/middle/message/Game.scss
index b7a7de78c..fbe626cae 100644
--- a/src/components/middle/message/Game.scss
+++ b/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%;
+ }
}
}
diff --git a/src/components/right/RightColumn.scss b/src/components/right/RightColumn.scss
index 6c047ba39..11736c284 100644
--- a/src/components/right/RightColumn.scss
+++ b/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;
}