diff --git a/src/context/intermediate/popovers/ImageViewer.module.scss b/src/context/intermediate/popovers/ImageViewer.module.scss index 0a9f360e..51b8310b 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 ca4f6bae..4518abcc 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) {