全角主题和 #reply-control 100% 宽度的一些小问题

您好,我发现我的用户非常讨厌 Discourse 默认使用的宽左边距和右边距。因此,我使用了 GitHub - programmersforum-reborn/discourse-wide-posts: Increases post width 以及以下额外的 CSS 调整:

:root {
    --d-max-width: 1900px;
    --topic-body-width: 1244px;
}

最近一次 Discourse 更新似乎破坏了 https://github.com/programmersforum-reborn/discourse-wide-posts,并且全宽的编辑器面板会超出屏幕左侧。因此,我禁用了 discourse-wide-posts 并安装了 https://github.com/discourse/discourse-full-width-component,它只减小了左边距,再加上这些 CSS 调整来减小右边距并使编辑器面板全宽:

body.has-sidebar-page #reply-control.show-preview:not(.fullscreen), #reply-control {
    max-width: 100%;
    margin-left: 0;
}
:root {
    --d-max-width: 1900px;
    --topic-body-width: 1244px;
}

但存在一些奇怪的问题。其中大部分可以在 Discourse Meta 上的 Default (full-width)Fully Theme 主题上重现。

首先,如果没有我之前提到的针对 #reply-control 的 CSS 调整,面板会根据缩放级别跳动:





此外,在正常缩放级别下,sidebar-wrapper div 的高度会根据其下方编辑器面板的高度进行调整,但在浏览器窗口宽度达到一定程度后,情况会发生变化,它会被截断,无法滚动到侧边栏底部(请查看截图的图像宽度以大致了解发生这种情况的位置):




最后,使用 --topic-body-width: 1244px; 规则时,在查看主题时,侧边栏项目在加载长帖线索中新帖子块所需的时间内会向上移动,然后在加载完成后恢复到正常位置。这非常分散注意力,而且似乎是从这次更新开始发生的,这次更新要求我重新配置自定义宽度。如果我将 CSS 规则更改为 --topic-body-width: 100%;,则侧边栏项目在时间线移动期间会保持在原位,但在旋转加载指示器出现期间,时间线会向左移动(可能是到 Discourse 的标准 --topic-body-width?),然后又会弹回其在右边距附近的正常位置。是否有解决方法?可能是我可以添加到那个旋转加载器上的宽度规则?由于它出现的时间太短,我无法用 HTML 检查器捕捉到它。

如果您需要更多信息来调试此问题,请告知我。谢谢!

1 个赞