fix(email-viewer): Enable horizontal scroll for wide HTML emails

- Change overflow-hidden to overflow-x-auto on email body container
- Add CSS for email-content-wrapper with inline-block display
- Use width: max-content on email-content to respect intrinsic width
- Prevent tables with width="100%" from shrinking below content

Also updates dependencies:
- next: 16.0.10 -> 16.1.1
- react/react-dom: 19.2.1 -> 19.2.3
- next-intl: 4.5.8 -> 4.6.1
- tailwindcss: 4.1.17 -> 4.1.18
- eslint: 9.39.1 -> 9.39.2
- jmap-jam: 0.11.0 -> 0.13.1
- lucide-react: 0.556.0 -> 0.562.0
This commit is contained in:
Matthieu MALVACHE
2025-12-24 04:05:28 +01:00
committed by Matthieu MALVACHE
parent 4920f7f64f
commit dbffaf2a15
4 changed files with 693 additions and 346 deletions
+17
View File
@@ -87,12 +87,29 @@ body {
}
/* Enhanced Email Content Styling */
/* Wrapper uses inline-block to size to content, enabling horizontal scroll */
.email-content-wrapper {
display: inline-block;
min-width: 100%;
}
.email-content {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-foreground);
max-width: none;
/* Size to content's natural width, don't shrink below it */
width: max-content;
min-width: 100%;
}
/* Prevent tables with width="100%" from shrinking below their content */
.email-content table[width="100%"],
.email-content table[style*="width:100%"],
.email-content table[style*="width: 100%"] {
min-width: max-content;
}
.email-content p {