From 72e9cda8444e7a1caf5c3216526c5674e1957ec8 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Mon, 16 Aug 2021 15:16:54 +0100
Subject: [PATCH] Attempt to fix attachments not showing up on Samsung
 Internet.

---
 external/lang                                 |  2 +-
 .../common/messaging/attachments/Grid.tsx     | 45 ++++++++++++-------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/external/lang b/external/lang
index 1c7f5e74..76f335d8 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 1c7f5e749f22204a1350b32ff57f4d97e487a0a6
+Subproject commit 76f335d8928f5f3c33dbb9c6b05888ff7d2f12ef
diff --git a/src/components/common/messaging/attachments/Grid.tsx b/src/components/common/messaging/attachments/Grid.tsx
index 0732550f..88c99772 100644
--- 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-width: min(100%, var(--width), var(--attachment-max-width));
-    max-height: min(var(--height), var(--attachment-max-height));
+    max-height: min(${(props) => props.height}px, var(--attachment-max-height));
 
-    img, video {
+    @supports not (
+        aspect-ratio: ${(props) => props.width} / ${(props) => props.height}
+    ) {
+        div::before {
+            float: left;
+            padding-top: ${(props) => (props.height / props.width) * 100}%;
+            content: "";
+        }
+
+        div::after {
+            display: block;
+            content: "";
+            clear: both;
+        }
+    }
+
+    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>
     );