Attempt to fix attachments not showing up on Samsung Internet.

This commit is contained in:
Paul 2021-08-16 15:16:54 +01:00
parent dcb038f986
commit 72e9cda844
2 changed files with 30 additions and 17 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit 1c7f5e749f22204a1350b32ff57f4d97e487a0a6 Subproject commit 76f335d8928f5f3c33dbb9c6b05888ff7d2f12ef

View file

@ -2,17 +2,38 @@ import styled from "styled-components";
import { Children } from "../../../../types/Preact"; import { Children } from "../../../../types/Preact";
const Grid = styled.div` const Grid = styled.div<{ width: number; height: number }>`
display: grid; 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(${(props) => props.height}px, var(--attachment-max-height));
max-height: min(var(--height), 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; grid-area: 1 / 1;
display: block; display: block;
max-width: 100%; max-width: 100%;
@ -44,24 +65,16 @@ type Props = Omit<
JSX.HTMLAttributes<HTMLDivElement>, JSX.HTMLAttributes<HTMLDivElement>,
"children" | "as" | "style" "children" | "as" | "style"
> & { > & {
style?: JSX.CSSProperties;
children?: Children; children?: Children;
width: number; width: number;
height: number; height: number;
}; };
export function SizedGrid(props: Props) { export function SizedGrid(props: Props) {
const { width, height, children, style, ...divProps } = props; const { width, height, children, ...divProps } = props;
return ( return (
<Grid <Grid {...divProps} width={width} height={height}>
{...divProps}
style={{
...style,
"--width": `${width}px`,
"--height": `${height}px`,
"--aspect-ratio": `${width} / ${height}`,
}}>
{children} {children}
</Grid> </Grid>
); );