移动端的引用栏对齐

你好 :wave:

在移动设备上,引用条按钮比以前有了更多的选项,现在我们还有 复制引用询问 AI,这使得它更宽,在小屏幕上很容易溢出屏幕,尤其是在这些标签的翻译较长的语言中。

在匈牙利语中情况更糟……

我认为最好的解决方案之一可能是将按钮排列成列。现在按钮会触发(编辑器、模态框、提示)并关闭引用条,不像以前那样在引用条中打开(编辑、询问 AI)。我们有更多的可用空间,并且更容易处理这些按钮。

类似这样:

移动端 / CSS

.quote-button {
  .buttons {
    flex-direction: column;
    > *:not(:last-child) {
      border-bottom: 1px solid var(--primary-low);
    }
    > .btn,
    .ai-post-helper__trigger {
      width: 100%;
      padding: 0.65em;
      justify-content: flex-start;
    }        
  }
}
13 个赞

有一个设计实验,旨在移除 Hide text in text select popup menu - Feedback 前的文本。但我更喜欢你的解决方案!

4 个赞

你完全说得对,目前的实现还有待改进。

我初步看了一下你的提议,但当选中右边缘的单词(例如这里的“pretty”)或一大段文本时,它的表现如何?这两种情况都可能导致它移出屏幕。总的来说,这些东西的定位通常是最难的部分。

如果可能的话,除了截图,我也很想看看它的实际效果。

(但我们绝对应该修复当前的水平溢出问题!)

3 个赞

它对齐得很好。

这是主题创建者演示:Theme Creator

5 个赞

我在 此提交 中将类似的解决方案添加到了核心。

感谢您提出 @Don

3 个赞