# Nav.post-controls 与 show-replies 在某些宽度下溢出

**URL:** <https://meta.discourse.org/t/nav-post-controls-with-show-replies-is-overflowing-at-certain-widths/314897>\
**Category:** UX\
**Tags:** css\
**Created:** [2024年七月4日 00:20 UTC](https://meta.discourse.org/t/nav-post-controls-with-show-replies-is-overflowing-at-certain-widths/314897 "2024-07-04T00:20:32Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [2024年七月4日 00:20 UTC](https://meta.discourse.org/t/nav-post-controls-with-show-replies-is-overflowing-at-certain-widths/314897/1 "2024-07-04T00:20:32Z")

</div>

您好，自从从 3.3.0.beta1 升级到 3.3.0.beta3 后，我遇到了 `nav.post-controls` 溢出并破坏流式布局的问题，当 `show-replies` 按钮出现时尤为明显。在“默认”和“默认（全宽）”主题下，在不同的浏览器宽度、有/无时间线滚动条、有/无侧边栏的情况下，也出现了这个问题：

 ![Screenshot from 2024-07-03 17-40-15](https://global.discourse-cdn.com/meta/original/4X/4/e/0/4e0359a3b0ff8bc7470c175fa2af20f3c8035901.png)  
 ![Screenshot from 2024-07-03 18-31-32](https://global.discourse-cdn.com/meta/original/4X/4/8/d/48db142aba4704db7ae5f95e87e45f83a35e48fd.png)  
 ![Screenshot from 2024-07-03 17-41-32](https://global.discourse-cdn.com/meta/original/4X/5/9/0/5908947e07d38472b324fa3d34311c0b69645200.png)

* * *

这是我目前临时的 CSS 解决方法，但一个合适的上游修复会更好：

```css
.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;
        }   
    }
}

```

---

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [2024年七月9日 13:10 UTC](https://meta.discourse.org/t/nav-post-controls-with-show-replies-is-overflowing-at-certain-widths/314897/2 "2024-07-09T13:10:14Z")

</div>

看起来这个问题与使用更高的缩放级别和/或 Firefox 的 `about:config` 设置 `layout.css.devPixelsPerPx = 1.1` 有关。我也使用 1.1 的操作系统级别文本缩放因子，但我认为 Firefox 不会遵循它，这就是为什么我必须对 Firefox 的 `about:config` 应用相同的解决方法。以下是我发现的其他与缩放级别相关的布局问题：

> [@Search "in this topic" responsive layout problem with "Ubuntu" base font](https://meta.discourse.org/t/search-in-this-topic-responsive-layout-problem-with-ubuntu-base-font/252029):
>
> 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](https://meta.discourse.org/t/more-topics-container-suggested-or-related-selected-item-border-intrudes-into-elements-below-it/286085):
>
> Hi there, this issue is even more noticeable on my own instance, but it’s also visible here on Meta: 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](https://meta.discourse.org/t/usercard-redesign-experiment/254353/159):
>
> 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:

> [@Quirks with full-width theme and #reply-control 100% width](https://meta.discourse.org/t/quirks-with-full-width-theme-and-reply-control-100-width/282720):
>
> 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](https://github.com/programmersforum-reborn/discourse-wide-posts) 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](https://github.com/programmersforum-reborn/discourse-wide-posts) , and the full-width composer panel was going off the left …