src-advisory/SRCmail
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+17
View File
@@ -87,12 +87,29 @@ body {
} }
/* Enhanced Email Content Styling */ /* 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 { .email-content {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: 1.6; line-height: 1.6;
color: var(--color-foreground); color: var(--color-foreground);
max-width: none; 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 { .email-content p {
components/email/email-viewer.tsx
+1 -1
View File
@@ -1195,7 +1195,7 @@ export function EmailViewer({
)} )}
{/* Email Body */} {/* Email Body */}
<div className="bg-background rounded-lg shadow-sm border border-border overflow-hidden"> <div className="bg-background rounded-lg shadow-sm border border-border overflow-x-auto">
<div className="email-content-wrapper p-6"> <div className="email-content-wrapper p-6">
{emailContent.isHtml ? ( {emailContent.isHtml ? (
<div <div
package-lock.json
Generated
+663 -333
View File
File diff suppressed because it is too large Load Diff
package.json
+12 -12
View File
@@ -35,30 +35,30 @@
"clsx": "^2.1.1", "clsx": "^2.1.1",
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"dompurify": "^3.2.7", "dompurify": "^3.2.7",
"jmap-jam": "^0.11.0", "jmap-jam": "^0.13.1",
"lucide-react": "^0.556.0", "lucide-react": "^0.562.0",
"next": "^16.0.8", "next": "^16.1.1",
"next-auth": "^4.24.11", "next-auth": "^4.24.11",
"next-intl": "^4.5.8", "next-intl": "^4.6.1",
"react": "^19.2.1", "react": "^19.2.3",
"react-dom": "^19.2.1", "react-dom": "^19.2.3",
"tailwind-merge": "^3.3.1", "tailwind-merge": "^3.3.1",
"zustand": "^5.0.9" "zustand": "^5.0.9"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4", "@tailwindcss/postcss": "^4.1.18",
"@types/node": "^22", "@types/node": "^22",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"@typescript-eslint/eslint-plugin": "^8.49.0", "@typescript-eslint/eslint-plugin": "^8.50.1",
"@typescript-eslint/parser": "^8.49.0", "@typescript-eslint/parser": "^8.50.1",
"eslint": "^9.39.1", "eslint": "^9.39.2",
"eslint-config-next": "^16.0.8", "eslint-config-next": "^16.1.1",
"eslint-plugin-react": "^7.37.5", "eslint-plugin-react": "^7.37.5",
"globals": "^16.5.0", "globals": "^16.5.0",
"husky": "^9.1.7", "husky": "^9.1.7",
"lint-staged": "^16.2.7", "lint-staged": "^16.2.7",
"tailwindcss": "^4.1.17", "tailwindcss": "^4.1.18",
"typescript": "^5" "typescript": "^5"
} }
} }