Attempt to fix attachments not showing up on Samsung Internet.

revoltchat · Aug 16, 2021 · 72e9cda · 72e9cda
1 parent dcb038f
commit 72e9cda
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/external/lang b/external/lang
diff --git a/src/components/common/messaging/attachments/Grid.tsx b/src/components/common/messaging/attachments/Grid.tsx
@@ -2,17 +2,38 @@ import styled from "styled-components";
 
 import { Children } from "../../../../types/Preact";
 
-const Grid = styled.div`
+const Grid = styled.div<{ width: number; height: number }>`
     display: grid;
+    aspect-ratio: ${(props) => props.width} / ${(props) => props.height};
 
-    aspect-ratio: var(--aspect-ratio);
+    max-width: min(
+        100%,
+        ${(props) => props.width}px,
+        var(--attachment-max-width)
+    );
+
+    max-height: min(${(props) => props.height}px, var(--attachment-max-height));
+
+    @supports not (
+        aspect-ratio: ${(props) => props.width} / ${(props) => props.height}
+    ) {
+        div::before {
+            float: left;
+            padding-top: ${(props) => (props.height / props.width) * 100}%;
+            content: "";
+        }
 
-    max-width: min(100%, var(--width), var(--attachment-max-width));
-    max-height: min(var(--height), var(--attachment-max-height));
+        div::after {
+            display: block;
+            content: "";
+            clear: both;
+        }
+    }
 
-    img, video {
+    img,
+    video {
         grid-area: 1 / 1;
-        
+
         display: block;
 
         max-width: 100%;
@@ -44,24 +65,16 @@ type Props = Omit<
     JSX.HTMLAttributes<HTMLDivElement>,
     "children" | "as" | "style"
 > & {
-    style?: JSX.CSSProperties;
     children?: Children;
     width: number;
     height: number;
 };
 
 export function SizedGrid(props: Props) {
-    const { width, height, children, style, ...divProps } = props;
+    const { width, height, children, ...divProps } = props;
 
     return (
-        <Grid
-            {...divProps}
-            style={{
-                ...style,
-                "--width": `${width}px`,
-                "--height": `${height}px`,
-                "--aspect-ratio": `${width} / ${height}`,
-            }}>
+        <Grid {...divProps} width={width} height={height}>
             {children}
         </Grid>
     );