fix: replace Infinity in calc statements, as browser support isn't great

GetStream · Oct 3, 2022 · 2430cb1 · 2430cb1
1 parent d5a6fe9
commit 2430cb1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/v1/Attachment.scss b/src/v1/Attachment.scss
@@ -1,8 +1,8 @@
 @mixin clamped-height-from-original-image-dimensions($max-height-css-var, $max-width-css-var) {
   height: min(
     var(#{$max-height-css-var}),
-    min(var(#{$max-width-css-var}, Infinity) / var(--original-width, Infinity), 1px) *
-      var(--original-height, Infinity)
+    min(var(#{$max-width-css-var}, 1000000) / var(--original-width, 1000000), 1px) *
+      var(--original-height, 1000000)
   );
 }
 
@@ -22,13 +22,18 @@
 .str-chat__player-wrapper {
   position: relative;
   padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
+  display: flex;
+  flex-direction: column;
+
   .react-player,
   .str-chat__video-angular {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
+    min-height: 0;
+    max-height: 100%;
   }
 }
 

diff --git a/src/v2/styles/AttachmentList/AttachmentList-layout.scss b/src/v2/styles/AttachmentList/AttachmentList-layout.scss
@@ -123,13 +123,17 @@
       min-width: 0;
       // CDN resize requires max-width to be present on this element - React
       max-width: $maxWidth;
+      display: flex;
+      flex-direction: column;
 
       .react-player,
       .str-chat__video-angular {
         height: 100%;
         width: 100%;
         // CDN resize requires max-width to be present on this element - Angular
         max-width: $maxWidth;
+        max-height: 100%;
+        min-height: 0;
       }
     }
   }

diff --git a/src/v2/styles/_utils.scss b/src/v2/styles/_utils.scss
@@ -190,7 +190,7 @@
 @mixin clamped-height-from-original-image-dimensions($max-height-css-var, $max-width-css-var) {
   height: min(
     var(#{$max-height-css-var}),
-    min(var(#{$max-width-css-var}, Infinity) / var(--original-width, Infinity), 1px) *
-      var(--original-height, Infinity)
+    min(var(#{$max-width-css-var}, 1000000) / var(--original-width, 1000000), 1px) *
+      var(--original-height, 1000000)
   );
 }