PM Inbox .user-main .controls breaking responsive width layout

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:

3 Likes

these buttons should wrap now and no longer overflow

image

2 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.