aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-17 06:34:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: correct fullWidthImages setting to use width instead of max-width

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

4
src/hooks/useSettings.ts
View File

@@ -71,8 +71,8 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
// Set paragraph alignment // Set paragraph alignment
root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify') root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify')
// Set image max-width based on full-width setting // Set image width based on full-width setting
root.setProperty('--image-max-width', settings.fullWidthImages ? 'none' : '100%') root.setProperty('--image-width', settings.fullWidthImages ? '100%' : 'auto')
} }

6
src/styles/components/reader.css
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; } .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 */ /* Tame images from external content */
.reader .reader-html img, .reader .reader-markdown img { .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; max-height: 70vh;
height: auto; height: auto;
width: auto;
display: block; display: block;
margin: 0.75rem auto; margin: 0.75rem auto;
border-radius: 6px; border-radius: 6px;
@@ -192,8 +192,8 @@
} }
.reader-markdown img, .reader-html img { .reader-markdown img, .reader-html img {
width: var(--image-width, auto) !important;
max-width: 100% !important; max-width: 100% !important;
width: auto !important;
height: auto; height: auto;
} }
} }