From c1dc2b9a1de2a2ab6b1c62a5c29c7e21d0f7c84b Mon Sep 17 00:00:00 2001
From: bree <me@bree.dev>
Date: Fri, 9 Jul 2021 11:09:55 -0400
Subject: [PATCH] Fix: image attachments not having minimum width
---
.../common/messaging/attachments/Attachment.module.scss | 5 +++++
src/components/common/messaging/attachments/Attachment.tsx | 3 +++
2 files changed, 8 insertions(+)
diff --git a/src/components/common/messaging/attachments/Attachment.module.scss b/src/components/common/messaging/attachments/Attachment.module.scss
index d44367e..111be64 100644
--- a/src/components/common/messaging/attachments/Attachment.module.scss
+++ b/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;
+ }
}
}
diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx
index d3df72f..1b56382 100644
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/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")
}
--
GitLab