モバイルでの引用バーの配置

こんにちは :wave:

モバイルでは、引用バーのボタンに以前よりも多くのオプションが表示されるようになりました。「引用をコピー」と「AIに質問」も追加されたため、画面が広くなり、特にこれらのラベルの翻訳が長くなる言語では、小さい画面で簡単に画面からはみ出してしまう可能性があります。

ハンガリー語ではさらに悪化します…

おそらく最善の解決策の1つは、ボタンを縦に並べることだと思います。現在、ボタンは(コンポーザー、モーダル、トースト)をトリガーして引用バーを閉じますが、以前のように(編集、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