Improve ImageViewer styles

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;
     }
 }

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} />
                     </>
                 )}