有关于将 Horizon 设置为全宽的考虑吗？我觉得它在中间（紧身胸衣？）感觉有点受限制，完全展开会很好地放松它。
4 个赞
不，不打算这样做。我们保持有限的宽度，这对应于最佳阅读长度。
2 个赞
我刚刚测试了（尽管是在移动设备上），对我来说运行正常。控制台里有什么吗？或者您可以尝试使用不同的浏览器检查一下？
1 个赞
感谢 @chapoi！我的控制台：
1 个赞
好的，我确实可以重现这个问题。我认为这是因为 Horizon 可能已经被移到了核心（core）。需要弄清楚如何修复预览链接，如果可能的话。（在 Meta 上预览会最简单——已更新主题）
话虽如此，您可以通过切换主题直接在 Meta 上预览它。
2 个赞
非常感谢，现在可以正常工作了！
1 个赞
仪表板：默认情况下按钮文本不可见 + “热门推荐主题”和“热门搜索词”的布局错位
您好
我正在使用 Horizon 主题，并在管理仪表板中发现了几个 UI 问题，特别是在“热门推荐主题”和“热门搜索词”部分。
问题 1：按钮文本默认不可见，悬停时才显示
位置：两个部分中的按钮（例如，“查看主题”、“查看搜索词”）
预期行为：按钮标签应始终可见（正常状态）。
问题 2：列宽不平衡和文本换行
位置：两个小部件中的表格列
观察到的布局：
主题/词条列：太窄 → 长标题垂直换行（例如，单行内出现多行文本）。
数字列（浏览量、点击量、搜索量等）：过宽 → 出现过多空白。
附加问题：数字值默认右对齐（数字的默认设置），但在 RTL（从右到左）环境中（如波斯语/阿拉伯语），这会造成视觉不一致。为了在 RTL 区域获得更好的用户体验，数字列应保持右对齐，但主题/词条列必须左对齐——目前在 RTL 中它们显示为右对齐，导致错位。
感谢您在 Horizon 主题上的工作。
1 个赞
感谢这些报告，我们会修复的！
不过，下次请注意：一些屏幕截图比文字能更快地帮助我们确定问题所在。
1 个赞
移动广告容器溢出到自家广告中 - RTL/LTR 布局不匹配
您好
我正在使用 Horizon 主题和官方的 House Ads 插件，并且我创建了一个自定义组件来使用与 Discourse 设计系统兼容的 CSS 变量和布局规则来设置广告样式。
问题：广告容器在移动设备上溢出视口（LTR 和 RTL 均如此）
- 主题: Horizon（在默认主题或其他主题如 Material 等中不可重现）
- 插件: House Ads + 自定义组件
- 设备: 移动设备
- 行为:
- 当 网站语言 = 英语 (LTR) 时 →
.ad-container的左边缘被裁剪（向左溢出）。 - 当 网站语言 = 波斯语/阿拉伯语 (RTL) 时 → 右边缘被裁剪（向右溢出）。
- 当 网站语言 = 英语 (LTR) 时 →
- 预期: 广告卡应完全包含在视口内，居中或与帖子内容宽度对齐。
我的 CSS 代码：
摘要
:root {
/* 核心颜色 */
--ad-bg: var(--secondary);
--ad-border: var(--highlight);
--ad-text: var(--primary);
/* 标签 */
--ad-label-bg: var(--highlight);
--ad-label-text: var(--danger);
}
.house-creative {
margin-left: 0 !important;
}
.house-creative a.between-posts-ad {
display: block;
text-decoration: none;
color: inherit;
background-color: transparent;
font-family: inherit;
}
/* ===============================
卡片容器
=============================== */
.house-creative .ad-container {
direction: rtl !important;
text-align: center !important;
margin-bottom: 20px;
padding: 10px 5px;
max-width: calc(#{$topic-avatar-width} + #{$topic-body-width} + (#{$topic-body-width-padding} * 2)); background-color: var(--ad-bg);
border: 2px solid var(--ad-border);
border-radius: 10px;
box-sizing: border-box;
line-height: 1.7;
color: var(--ad-text);
transition:
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease,
transform 0.2s ease;
}
.house-creative a.between-posts-ad:hover .ad-container {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.house-creative .ad-label {
display: inline-block;
text-align: center;
margin-bottom: 6px;
padding: 4px 12px;
font-size: 0.85em;
font-weight: 700;
text-transform: uppercase;
background-color: var(--ad-label-bg);
color: var(--ad-label-text);
border-radius: 999px;
}
.house-creative .ad-container .ad-text {
margin: 0;
font-size: 1rem;
line-height: 1.9;
color: var(--ad-text);
direction: rtl ;
text-align: center !important ;
unicode-bidi: isolate;
}
@media (max-width: 480px) {
.house-creative .ad-container {
direction: rtl !important;
text-align: center !important;
padding: 16px 12px;
width: 100%;
max-width: 100%;
}
}
Horizon 尚未与所有组件和插件兼容。
1 个赞