From a6674610b8f344ce9bc60dba0a71ae44cf5c33e0 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 1 Nov 2025 00:32:51 +0100
Subject: [PATCH] fix: correct fullWidthImages setting to use width instead of
 max-width

- Change from --image-max-width CSS variable to --image-width
- When enabled, sets images to width: 100% (enlarging small images)
- Always constrains with max-width: 100% to prevent overflow
- Update mobile responsive styles to respect the setting
---
 src/hooks/useSettings.ts         | 4 ++--
 src/styles/components/reader.css | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
index c4ef517f..4d96854f 100644
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -71,8 +71,8 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       // Set paragraph alignment
       root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify')
       
-      // Set image max-width based on full-width setting
-      root.setProperty('--image-max-width', settings.fullWidthImages ? 'none' : '100%')
+      // Set image width based on full-width setting
+      root.setProperty('--image-width', settings.fullWidthImages ? '100%' : 'auto')
       
     }
     
diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css
index 0835771f..d5564d38 100644
--- a/src/styles/components/reader.css
+++ b/src/styles/components/reader.css
@@ -57,10 +57,10 @@
 .reader .reader-markdown h1, .reader .reader-markdown h2, .reader .reader-markdown h3, .reader .reader-markdown h4, .reader .reader-markdown h5, .reader .reader-markdown h6 { text-align: left !important; }
 /* Tame images from external content */
 .reader .reader-html img, .reader .reader-markdown img { 
-  max-width: var(--image-max-width, 100%); 
+  width: var(--image-width, auto);
+  max-width: 100%; 
   max-height: 70vh; 
   height: auto; 
-  width: auto; 
   display: block; 
   margin: 0.75rem auto; 
   border-radius: 6px; 
@@ -192,8 +192,8 @@
   }
   
   .reader-markdown img, .reader-html img {
+    width: var(--image-width, auto) !important;
     max-width: 100% !important;
-    width: auto !important;
     height: auto;
   }
 }