diff --git a/src/context/intermediate/popovers/ImageViewer.module.scss b/src/context/intermediate/popovers/ImageViewer.module.scss index 0a9f360e430b664844485b435e848411e3c0c074..51b8310b438e83408fd956fb98d8e6ab8cdbc6e7 100644 --- a/src/context/intermediate/popovers/ImageViewer.module.scss +++ b/src/context/intermediate/popovers/ImageViewer.module.scss @@ -1,6 +1,16 @@ .viewer { + display: flex; + flex-direction: column; + border-end-end-radius: 4px; + border-end-start-radius: 4px; + overflow: hidden; + img { + width: auto; + height: auto; max-width: 90vw; - max-height: 90vh; + max-height: 75vh; + border-bottom: thin solid var(--tertiary-foreground); + object-fit: contain; } } diff --git a/src/context/intermediate/popovers/ImageViewer.tsx b/src/context/intermediate/popovers/ImageViewer.tsx index ca4f6baea2f39612229f1f0346f8df67a9cdd8be..4518abcc2d07d538fa4cb5a28bddac09cc74b5ef 100644 --- a/src/context/intermediate/popovers/ImageViewer.tsx +++ b/src/context/intermediate/popovers/ImageViewer.tsx @@ -22,7 +22,10 @@ export function ImageViewer({ attachment, embed, onClose }: Props) { return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url); } - if (attachment && attachment.metadata.type !== "Image") return null; + if (attachment?.metadata.type !== "Image") { + return null; + } + const client = useContext(AppContext); return ( @@ -30,13 +33,21 @@ export function ImageViewer({ attachment, embed, onClose }: Props) { <div className={styles.viewer}> {attachment && ( <> - <img src={client.generateFileURL(attachment)} /> + <img + src={client.generateFileURL(attachment)} + width={attachment.metadata.width} + height={attachment.metadata.height} + /> <AttachmentActions attachment={attachment} /> </> )} {embed && ( <> - <img src={proxyImage(embed.url)} /> + <img + src={proxyImage(embed.url)} + width={attachment.metadata.width} + height={attachment.metadata.height} + /> <EmbedMediaActions embed={embed} /> </> )}