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, "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 ( - + {children} );