Hi there, here on Discourse Meta and on my Discourse instance the “Expand” button in the personal messages .user-main .controls overflows beyond the browser window width even at a reasonable browser width of ~2/3 of my 1920x1080 screen resolution. The result is the same on Firefox and Chromium:
AI-generated summary
PM Inbox .user-main .controls breaking responsive width layout
There is an issue with the “Expand” button in the personal messages .user-main .controls overflowing beyond the browser window width at reasonable resolutions. rahim123 reported this issue and shared a screenshot.
awesomerobot confirmed that this issue has been fixed, with the buttons now wrapping and no longer overflowing. However, this fix will not be backported to the 3.3 Stable branch due to it being a minor interface issue.
As a temporary solution, awesomerobot provided a CSS snippet that can be added to a theme or theme component to improve the layout:
.desktop-view .user-main .about.collapsed-info .controls > ul {
display: inline-flex;
flex-wrap: wrap;
justify-content: end;
}
This will allow the controls to wrap and avoid overflow until an update can be applied.
3 Likes
Thanks @Kris for remembering about this!
Will this fix make it into the 3.3 Stable branch by any chance?
1 Like
No, I don’t believe so. An interface issue like this would generally be considered minor, and backporting changes to stable is usually a more complicated process reserved for bugs that break functionality or cause security issues.
In the meantime, you could add a little CSS to your theme or a separate theme component that will improve the layout.
.desktop-view .user-main .about.collapsed-info .controls > ul {
display: inline-flex;
flex-wrap: wrap;
justify-content: end;
}
This isn’t as thorough as the solution added to Discourse directly, but will allow the controls to wrap and avoid overflow until you’re able to update.