From 5ce2371b41819d4a529f21b61483f98134413113 Mon Sep 17 00:00:00 2001
From: Kibi Kelburton <git@f0ck.it>
Date: Sun, 24 May 2026 20:41:24 +0200
Subject: [PATCH] fix image expansion

---
 public/s/css/f0ckm.css |  9 +++++----
 public/s/js/f0ckm.js   | 19 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css
index 10ba093..c79044f 100644
--- a/public/s/css/f0ckm.css
+++ b/public/s/css/f0ckm.css
@@ -1735,18 +1735,19 @@ body.sidebar-right-hidden .global-sidebar-right {
     overflow-y: scroll;
   }
 
-  /* When image is expanded: switch to flex column so image height pushes metadata below it */
+  /* When image is expanded: flex column so metadata stays below the image */
   body.layout-modern .item-layout-container .item-main-content:has(.embed-responsive.is-expanded) {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
 
-  /* Prevent flex children from shrinking inside the fixed-height container —
-     without this they compress to fit and the image overflows visually */
+  /* flex-shrink: 0 prevents children from compressing to fit the fixed-height container.
+     align-self: center overrides the grid-mode "align-self: start" rules — in flex-column
+     "start" means left, not top, so we explicitly center instead. */
   body.layout-modern .item-layout-container .item-main-content:has(.embed-responsive.is-expanded) > * {
     flex-shrink: 0;
-    width: 100%;
+    align-self: center;
   }
 
   body.layout-modern .item-layout-container .item-main-content ._204863 {
diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js
index d501a53..97aab57 100644
--- a/public/s/js/f0ckm.js
+++ b/public/s/js/f0ckm.js
@@ -8166,7 +8166,24 @@ document.addEventListener('DOMContentLoaded', () => {
         if (expandOnClick) {
             const wrapper = elfe.closest('.embed-responsive');
             if (wrapper) {
-                wrapper.classList.toggle('is-expanded');
+                // If already expanded, always allow collapsing
+                if (wrapper.classList.contains('is-expanded')) {
+                    wrapper.classList.remove('is-expanded');
+                    return;
+                }
+                // Only expand if the image is actually being clipped (not fully visible).
+                // Compare the image's rendered height to its natural height —
+                // if rendered >= natural, the image already fits fully in the box.
+                const img = wrapper.querySelector('img#f0ck-image');
+                if (img && img.complete && img.naturalHeight > 0) {
+                    const rendered = img.getBoundingClientRect();
+                    // Allow a 2px tolerance for subpixel rounding
+                    if (rendered.height + 2 >= img.naturalHeight) {
+                        // Fully visible — do nothing (no expand needed, no modal)
+                        return;
+                    }
+                }
+                wrapper.classList.add('is-expanded');
             }
         } else {
             openImageModal(elfe.href);