Fix: image attachments not having minimum width

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

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