From a93dd348fe3ac2798fe7b9ca6195d33541405962 Mon Sep 17 00:00:00 2001
From: Mechiel Lukkien <mechiel@ueber.net>
Date: Thu, 12 Oct 2023 22:08:13 +0200
Subject: [PATCH] webmail: ensure wrap of long header lines, instead of
 horizontal scrollbar in message header section

---
 webmail/msg.html     | 1 +
 webmail/msg.js       | 2 +-
 webmail/msg.ts       | 2 +-
 webmail/webmail.html | 1 +
 webmail/webmail.js   | 2 +-
 webmail/webmail.ts   | 2 +-
 6 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/webmail/msg.html b/webmail/msg.html
index 2a61893..8bc7055 100644
--- a/webmail/msg.html
+++ b/webmail/msg.html
@@ -8,6 +8,7 @@
 		<style>
 * { font-size: inherit; font-family: 'ubuntu', 'lato', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
 table td, table th { padding: .25ex .5ex; }
+.msgheaders td { word-break: break-word; /* prevent horizontal scroll bar for long header values */ }
 
 .pad { padding: 1ex; }
 .scriptswitch { text-decoration: underline #dca053 2px; }
diff --git a/webmail/msg.js b/webmail/msg.js
index d0a264f..aa7429e 100644
--- a/webmail/msg.js
+++ b/webmail/msg.js
@@ -964,7 +964,7 @@ const init = () => {
 	if (mi.Attachments && mi.Attachments.length > 0) {
 		dom._kids(msgattachmentview, dom.div(style({ borderTop: '1px solid #ccc' }), dom.div(dom._class('pad'), 'Attachments: ', join(mi.Attachments.map(a => a.Filename || '(unnamed)'), () => ', '))));
 	}
-	const msgheaderview = dom.table(style({ marginBottom: '1ex', width: '100%' }));
+	const msgheaderview = dom.table(dom._class('msgheaders'), style({ marginBottom: '1ex', width: '100%' }));
 	loadMsgheaderView(msgheaderview, mi, [], null);
 	const l = window.location.pathname.split('/');
 	const w = l[l.length - 1];
diff --git a/webmail/msg.ts b/webmail/msg.ts
index 8009688..1344fac 100644
--- a/webmail/msg.ts
+++ b/webmail/msg.ts
@@ -19,7 +19,7 @@ const init = () => {
 		)
 	}
 
-	const msgheaderview = dom.table(style({marginBottom: '1ex', width: '100%'}))
+	const msgheaderview = dom.table(dom._class('msgheaders'), style({marginBottom: '1ex', width: '100%'}))
 	loadMsgheaderView(msgheaderview, mi, [], null)
 
 	const l = window.location.pathname.split('/')
diff --git a/webmail/webmail.html b/webmail/webmail.html
index 834d7a6..8af5d3f 100644
--- a/webmail/webmail.html
+++ b/webmail/webmail.html
@@ -64,6 +64,7 @@ table.search td { padding: .25em; }
 .msgitemsubject { position: relative; }
 .msgitemflag { margin-right: 1px; font-weight: normal; font-size: .9em; }
 .msgitemflag.msgitemflagcollapsed { color: #666; }
+.msgheaders td { word-break: break-word; /* prevent horizontal scroll bar for long header values */ }
 .quoted1 { color: #03828f; }
 .quoted2 { color: #c7445c; }
 .quoted3 { color: #417c10; }
diff --git a/webmail/webmail.js b/webmail/webmail.js
index f67f323..02e8453 100644
--- a/webmail/webmail.js
+++ b/webmail/webmail.js
@@ -2715,7 +2715,7 @@ const newMsgView = (miv, msglistView, listMailboxes, possibleLabels, messageLoad
 	let urlType; // text, html, htmlexternal; for opening in new tab/print
 	let msgbuttonElem, msgheaderElem, msgattachmentElem, msgmodeElem;
 	let msgheaderdetailsElem = null; // When full headers are visible, or some headers are requested through settings.
-	const msgmetaElem = dom.div(style({ backgroundColor: '#f8f8f8', borderBottom: '1px solid #ccc', maxHeight: '90%', overflowY: 'auto' }), attr.role('region'), attr.arialabel('Buttons and headers for message'), msgbuttonElem = dom.div(), dom.div(attr.arialive('assertive'), msgheaderElem = dom.table(style({ marginBottom: '1ex', width: '100%' })), msgattachmentElem = dom.div(), msgmodeElem = dom.div()));
+	const msgmetaElem = dom.div(style({ backgroundColor: '#f8f8f8', borderBottom: '1px solid #ccc', maxHeight: '90%', overflowY: 'auto' }), attr.role('region'), attr.arialabel('Buttons and headers for message'), msgbuttonElem = dom.div(), dom.div(attr.arialive('assertive'), msgheaderElem = dom.table(dom._class('msgheaders'), style({ marginBottom: '1ex', width: '100%' })), msgattachmentElem = dom.div(), msgmodeElem = dom.div()));
 	const msgscrollElem = dom.div(dom._class('pad', 'yscrollauto'), attr.role('region'), attr.arialabel('Message body'), style({ backgroundColor: 'white' }));
 	const msgcontentElem = dom.div(dom._class('scrollparent'), style({ flexGrow: '1' }));
 	const trashMailboxID = listMailboxes().find(mb => mb.Trash)?.ID;
diff --git a/webmail/webmail.ts b/webmail/webmail.ts
index 435cd76..61c82b7 100644
--- a/webmail/webmail.ts
+++ b/webmail/webmail.ts
@@ -2207,7 +2207,7 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l
 		msgbuttonElem=dom.div(),
 		dom.div(
 			attr.arialive('assertive'),
-			msgheaderElem=dom.table(style({marginBottom: '1ex', width: '100%'})),
+			msgheaderElem=dom.table(dom._class('msgheaders'), style({marginBottom: '1ex', width: '100%'})),
 			msgattachmentElem=dom.div(),
 			msgmodeElem=dom.div(),
 		),