diff --git a/src/components/common/messaging/attachments/Attachment.module.scss b/src/components/common/messaging/attachments/Attachment.module.scss index d44367e57ba192bea4816352d076908be64513a2..111be64cff31802b15bfe341a772132d32fef1e2 100644 --- a/src/components/common/messaging/attachments/Attachment.module.scss +++ b/src/components/common/messaging/attachments/Attachment.module.scss @@ -26,6 +26,7 @@ max-width: min(480px, 100%, var(--width-px)); object-fit: contain; + object-position: top left; } &.image { @@ -37,6 +38,10 @@ &.tall { height: min(100%, var(--height-px)); width: 100%; + + &.loaded { + width: auto; + } } } diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx index d3df72ff5d9bf58c68e21a14c7bc14776a022624..1b56382990cd952d639503443f4c7fcd89d9273a 100644 --- a/src/components/common/messaging/attachments/Attachment.tsx +++ b/src/components/common/messaging/attachments/Attachment.tsx @@ -24,6 +24,7 @@ export default function Attachment({ attachment, hasContent }: Props) { const { openScreen } = useIntermediate(); const { filename, metadata } = attachment; const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_")); + const [loaded, setLoaded] = useState(false); const url = client.generateFileURL( attachment, @@ -55,6 +56,7 @@ export default function Attachment({ attachment, hasContent }: Props) { className={classNames( styles.attachment, styles.image, + loaded && styles.loaded, metadata.width > metadata.height ? styles.long : styles.tall, @@ -68,6 +70,7 @@ export default function Attachment({ attachment, hasContent }: Props) { onClick={() => openScreen({ id: "image_viewer", attachment }) } + onLoad={() => setLoaded(true)} onMouseDown={(ev) => ev.button === 1 && window.open(url, "_blank") }