starred/webmail
1
0
Fork 0
mirror of https://github.com/bulwarkmail/webmail.git synced 2026-10-31 08:13:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1034 from shukiv/fix/viewer-image-own-max-width

Browse Source 
fix(viewer): stop stretching images that carry their own max-width
This commit is contained in:
Linus Rath
2026-09-17 22:03:32 +02:00
committed by GitHub
parent ee4763d5c0 68341a0b69
commit bd825fb19f
2 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/email/email-viewer.tsx
+18 -2
View File
@@ -2321,7 +2321,15 @@ export function EmailViewer({
[style*="height:100%"], [style*="height: 100%"] { height: auto !important; }
body { margin: 0; padding: ${bodyPadding}; overflow-x: auto; overflow-y: hidden; height: auto !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.6; color: #1a1a1a; background: #ffffff; word-wrap: break-word; overflow-wrap: break-word; }
@media (max-width: 640px) { body { padding-left: ${mobileBodyPaddingX}; padding-right: ${mobileBodyPaddingX}; } }
img { max-width: 100% !important; height: auto !important; }
/* Only force the cap on images that set no width of their own: an
!important 100% also overrides a sender's inline max-width, and an
image sized by max-width + max-height + width:100% then grows to
the pane width while its max-height still clamps the height - the
picture renders stretched. Same reasoning as the table rule below (#790).
height stays !important so a fixed inline height cannot squash it. */
img:not([style*="max-width"]) { max-width: 100% !important; }
img[style*="max-width"] { max-width: 100%; }
img { height: auto !important; }
a { color: #1a73e8; }
/* Only force the cap on tables that set no width of their own: an
!important 100% would also override a newsletter's inline
@@ -2741,7 +2749,15 @@ export function EmailViewer({
.meta { font-size: 13px; color: #555; line-height: 1.6; }
.meta strong { color: #000; }
.body { font-size: 14px; line-height: 1.6; }
.body img { max-width: 100% !important; height: auto !important; }
/* Only force the cap on images that set no width of their own: an
!important 100% also overrides a sender's inline max-width, and an
image sized by max-width + max-height + width:100% then grows to
the pane width while its max-height still clamps the height - the
picture renders stretched. Matches the viewer's own image rule.
height stays !important so a fixed inline height cannot squash it. */
.body img:not([style*="max-width"]) { max-width: 100% !important; }
.body img[style*="max-width"] { max-width: 100%; }
.body img { height: auto !important; }
@media print { body { margin: 20px; } }
</style></head><body dir="auto">
<div class="header">
components/email/thread-conversation-view.tsx
+9 -1
View File
@@ -468,7 +468,15 @@ function EmailCard({
only left for content too wide to stay legible when scaled. */
html { overflow: hidden; }
body { overflow-x: auto; overflow-y: hidden; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.6; color: #1a1a1a; background: #ffffff; word-wrap: break-word; overflow-wrap: break-word; }
img { max-width: 100% !important; height: auto !important; }
/* Only force the cap on images that set no width of their own: an
!important 100% also overrides a sender's inline max-width, and an
image sized by max-width + max-height + width:100% then grows to
the pane width while its max-height still clamps the height - the
picture renders stretched. Same reasoning as the table rule below (#790).
height stays !important so a fixed inline height cannot squash it. */
img:not([style*="max-width"]) { max-width: 100% !important; }
img[style*="max-width"] { max-width: 100%; }
img { height: auto !important; }
a { color: #1a73e8; }
/* Only force the cap on tables that set no width of their own: an
!important 100% would also override a newsletter's inline