From 002d565b3f8e4b060d7662133f137cffaf37b345 Mon Sep 17 00:00:00 2001
From: bree <me@bree.dev>
Date: Tue, 6 Jul 2021 03:03:05 -0400
Subject: [PATCH] Improve `ImageViewer` styles

---
 .../popovers/ImageViewer.module.scss            | 12 +++++++++++-
 .../intermediate/popovers/ImageViewer.tsx       | 17 ++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

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