Email layout width bug

[InputOutputZ]

Prerequisites

• I have searched for duplicate or closed issues
• I can recreate the issue with all plugins disabled

Describe the issue

Hi there,

I report another what I think is a bug. The email view is not populated correctly, and there is an overflow breaking many specific emails layout when it looks like it can be fixed because I received this email on gmail, and it looks fine,

when I receive it on roundcube, it looks like this:-

I tried reducing css zoom property by setting 0.65 on the overflowed table, and it looked like this, I think from responsive point of view is not correct either, and requires a better approach to do with max-width.

I had this issue on both recent safari 18.3 and chrome 133.0.6943.99.

Anyhow, If I can help on fixing this issue, I have few ideas, please let me know I would love to share it.

With thanks.

Zakaria.

What browser(s) are you seeing the problem on?

Chrome, Safari

What version of PHP are you using?

8.4

What version of Roundcube are you using?

1.6.9

JavaScript errors

No response

PHP errors

No response

[alecpl]

Usually when this happens it is the mail content that is "forcing" the width. Are there any css styles in the mail itself that allow the content to scale?

If the content contains styles that "force" width, I'm not sure what exactly we could do. So, any help would be appreciated.

[InputOutputZ]

Usually when this happens it is the mail content that is "forcing" the width. Are there any css styles in the mail itself that allow the content to scale?

If the content contains styles that "force" width, I'm not sure what exactly we could do. So, any help would be appreciated.

Yes there are css styles forcing width, but in gmail app are not causing problems? I think gmail checks if they have fixed width forcing the layout width and adjusting the layout to fit in view accordingly. Probably responsiveness parser or corrector and they strip the email and restructure with an engine.

I noticed gmail modifies the email content only in gmail app, in their web mobile mode, they have actually in terms of responsiveness much more worst than Roundcube issue:-

But, first idea is checking if the email layout width where overflow can start to take place is greater than window width probably main parent elements, and using zoom as last option, and reducing root element zoom proportionally until email layout width fits in window width.

Second idea, is to find the elements which has width, min-width, max-width containing px measurement, and check if its value == to email layout width, and change such selectors css properties, of min-width, max-width, width with either 100% or 100vw as in some instances they yield different results to target key elements in most email, I expect the layout containers which will have such properties and potentially with fixed width to be either divs or tables as well as, tbody, tr. Also, img tags. Also, I think using !important property might be helpful in some instances if was applied in the correct way and condition.

Another option but not sure if its viable, since Roundcube is a web application, checking view email on a browser link availability, and fetching such link content might work, as the media queries will be present.

One more idea, is adding something called Roundcube Badges next to perhaps email subject, to emails layouts which was built using get.foundation and other accredited framework, to distinguish between emails which wasn't built with and encourage email senders to start using valid and responsive layout which they never force fixed width on.

Lastly, is building Roundcube responsive email parser/engine, and not sure if you saw https://get.foundation/emails/docs/, perhaps it might help as start point, using their library, and build html-based emails converter to use this library. I worked with it in the past, I was able to build very high quality and difficult to cascade responsive email layout which worked well on every email client just so perfectly including gmail web app.
Refer to
https://get.foundation/emails.html
https://get.foundation/emails/inliner.html

If I had another idea I will share it but I hope you to be inspired with much more ideas because it feels horrible after someone writes a beautiful email to break in any client, as it deserved to be delivered and viewed in the best way.

Zakaria.

[seb1k]

Hi !

My skin : elastic2022 is correcting this html issue (email autoresize) :
https://github.com/seb1k/Elastic2022

Thanks to tell me if it correct your problem.