Nav.post-controls with show-replies is overflowing at certain widths

[rahim123]

Hi there, since upgrading from 3.3.0.beta1 → 3.3.0.beta3 I’m having an issue with the nav.post-controls overflowing and breaking the fluid layout when the show-replies button appears. This is also happening here with the “Default” and “Default (full-width)” themes at different browser widths, with/without the timeline scroller, and with/without the sidebar:

---

This is my dirty CSS hack for now, but a proper upstream fix would be better:

.topic-post .post-controls .show-replies {
    display: flex;
    justify-content: flex-end;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 5px);
    padding: 1px;
}

@media only screen and (max-width: 675px) {
    .topic-post .post-controls {
        --control-margin: 0;
    }
    
    .topic-post .post-controls .reply { /* Prevent Reply button overflow with very narrow widths */
        padding-right: 0px;
        .d-button-label {
            display: none;
        }   
    }
}

[rahim123]

It looks like this issue is related to using higher zoom levels and/or the Firefox about:config setting of layout.css.devPixelsPerPx = 1.1 . I also use an OS level text scaling factor of 1.1, but I don’t think that Firefox obeys that, which is why I have to apply the same hack to Firefox’s about:config . Here are some other layout issues I found related to the zoom level:

Search "in this topic" responsive layout problem with "Ubuntu" base font

Hi there, I’m having a weird rendering problem at certain zoom levels with Firefox on my site. The problem is with the search “in this topic” text wrapping onto two lines. It appears to only happen with the system base font set to “Ubuntu” and the zoom level at 100% or 110% . I also have my Discourse profile interface font size preference set to “Larger”. I’m seeing the same behavior with Sam’s Simple Theme as well as the default Discourse light theme, and I tried disabling all my theme componen…

"More Topics" container "Suggested" or "Related" selected item border intrudes into elements below it

Hi there, this issue is even more noticeable on my own instance, but it’s also visible here on Meta: [image] I worked around it for now with: .more-topics__container .nav li .btn { /* Private messages "Related" and "Suggested" selected border was intruding into elements below */ padding: 0em .65em; }

Usercard Redesign Experiment

Hi there, I ran across a bit of an issue where the usercard appears partially off-screen. It seems to only happen when the browser is maximized and using a higher zoom and/or higher dpi setting. It’s more noticeable with Sam’s Simple Theme, but it starts to happen with the “Default” theme too depending on the zoom level and how many frequent posters appear: [image]

Quirks with full-width theme and #reply-control 100% width

Hi there, I’ve found that my users really hate the wide left and right margins that Discourse uses by default. So I was using GitHub - programmersforum-reborn/discourse-wide-posts: Increases post width together with these additional CSS tweaks: :root { --d-max-width: 1900px; --topic-body-width: 1244px; } A recent Discourse update appears to have broken GitHub - programmersforum-reborn/discourse-wide-posts: Increases post width , and the full-width composer panel was going off the left …