diff --git a/webmail/webmail.js b/webmail/webmail.js index 44e862c..b436684 100644 --- a/webmail/webmail.js +++ b/webmail/webmail.js @@ -2865,7 +2865,10 @@ 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(dom._class('msgheaders'), style({ marginBottom: '1ex', width: '100%' })), msgattachmentElem = dom.div(), msgmodeElem = dom.div())); + const msgmetaElem = dom.div(style({ backgroundColor: '#f8f8f8', borderBottom: '5px solid white', 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()), + // Explicit gray line with white border below that separates headers from body, to + // prevent HTML messages from faking UI elements. + dom.div(style({ height: '2px', backgroundColor: '#ccc' }))); 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 c621053..17532a8 100644 --- a/webmail/webmail.ts +++ b/webmail/webmail.ts @@ -2364,7 +2364,7 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l let msgheaderdetailsElem: HTMLElement | null = 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'}), + style({backgroundColor: '#f8f8f8', borderBottom: '5px solid white', maxHeight: '90%', overflowY: 'auto'}), attr.role('region'), attr.arialabel('Buttons and headers for message'), msgbuttonElem=dom.div(), dom.div( @@ -2373,6 +2373,9 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l msgattachmentElem=dom.div(), msgmodeElem=dom.div(), ), + // Explicit gray line with white border below that separates headers from body, to + // prevent HTML messages from faking UI elements. + dom.div(style({height: '2px', backgroundColor: '#ccc'})), ) const msgscrollElem = dom.div(dom._class('pad', 'yscrollauto'),