webmail: ensure wrap of long header lines, instead of horizontal scrollbar in message header section

This commit is contained in:
Mechiel Lukkien 2023-10-12 22:08:13 +02:00
parent 8dacc31445
commit a93dd348fe
No known key found for this signature in database
6 changed files with 6 additions and 4 deletions

View File

@ -8,6 +8,7 @@
<style> <style>
* { font-size: inherit; font-family: 'ubuntu', 'lato', sans-serif; margin: 0; padding: 0; box-sizing: border-box; } * { font-size: inherit; font-family: 'ubuntu', 'lato', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
table td, table th { padding: .25ex .5ex; } table td, table th { padding: .25ex .5ex; }
.msgheaders td { word-break: break-word; /* prevent horizontal scroll bar for long header values */ }
.pad { padding: 1ex; } .pad { padding: 1ex; }
.scriptswitch { text-decoration: underline #dca053 2px; } .scriptswitch { text-decoration: underline #dca053 2px; }

View File

@ -964,7 +964,7 @@ const init = () => {
if (mi.Attachments && mi.Attachments.length > 0) { 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)'), () => ', ')))); 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); loadMsgheaderView(msgheaderview, mi, [], null);
const l = window.location.pathname.split('/'); const l = window.location.pathname.split('/');
const w = l[l.length - 1]; const w = l[l.length - 1];

View File

@ -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) loadMsgheaderView(msgheaderview, mi, [], null)
const l = window.location.pathname.split('/') const l = window.location.pathname.split('/')

View File

@ -64,6 +64,7 @@ table.search td { padding: .25em; }
.msgitemsubject { position: relative; } .msgitemsubject { position: relative; }
.msgitemflag { margin-right: 1px; font-weight: normal; font-size: .9em; } .msgitemflag { margin-right: 1px; font-weight: normal; font-size: .9em; }
.msgitemflag.msgitemflagcollapsed { color: #666; } .msgitemflag.msgitemflagcollapsed { color: #666; }
.msgheaders td { word-break: break-word; /* prevent horizontal scroll bar for long header values */ }
.quoted1 { color: #03828f; } .quoted1 { color: #03828f; }
.quoted2 { color: #c7445c; } .quoted2 { color: #c7445c; }
.quoted3 { color: #417c10; } .quoted3 { color: #417c10; }

View File

@ -2715,7 +2715,7 @@ const newMsgView = (miv, msglistView, listMailboxes, possibleLabels, messageLoad
let urlType; // text, html, htmlexternal; for opening in new tab/print let urlType; // text, html, htmlexternal; for opening in new tab/print
let msgbuttonElem, msgheaderElem, msgattachmentElem, msgmodeElem; let msgbuttonElem, msgheaderElem, msgattachmentElem, msgmodeElem;
let msgheaderdetailsElem = null; // When full headers are visible, or some headers are requested through settings. 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 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 msgcontentElem = dom.div(dom._class('scrollparent'), style({ flexGrow: '1' }));
const trashMailboxID = listMailboxes().find(mb => mb.Trash)?.ID; const trashMailboxID = listMailboxes().find(mb => mb.Trash)?.ID;

View File

@ -2207,7 +2207,7 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l
msgbuttonElem=dom.div(), msgbuttonElem=dom.div(),
dom.div( dom.div(
attr.arialive('assertive'), 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(), msgattachmentElem=dom.div(),
msgmodeElem=dom.div(), msgmodeElem=dom.div(),
), ),