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
This commit is contained in:
Gigi
2025-11-01 00:32:51 +01:00
parent 6ae3decafb
commit a6674610b8
2 changed files with 5 additions and 5 deletions

View File

@@ -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')
}

View File

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