@メンションポップオーバーが右端ではみ出す問題を修正

@mentions ポップオーバーが画面右端付近でトリガーされた際にビューポートからはみ出す問題を、CSS 1行の追加で修正しました。

背景

@mentions メニューは、入力カーソルが右端に近い位置にある場合、ポップオーバーが右方向にオーバーフローしてビューポート外にはみ出すことがありました。エディタが画面の右寄りに配置されていたり、ビューポートが狭い場合に発生しやすい問題です。

ポップオーバーの右端クリッピングには既に data-clipped-at-right 属性による制御が実装されており、inset-inline-end: 1ch で右端への吸い付け位置は調整されていました。しかしポップオーバー自体の 最大幅が制限されていなかったため、コンテンツ幅が大きい場合に左方向へはみ出す形でオーバーフローが発生していました。

技術的な変更

app/assets/stylesheets/lexxy-editor.css の &[data-clipped-at-right] ブロックに max-inline-size の指定を1行追加しました。

変更前:

&[data-clipped-at-right] {
  inset-inline-start: unset;
  inset-inline-end: 1ch;
}

変更後:

&[data-clipped-at-right] {
  inset-inline-start: unset;
  inset-inline-end: 1ch;
  max-inline-size: calc(100% - 1ch);
}

max-inline-size: calc(100% - 1ch) の 100% はポップオーバーのオフセット親要素（エディタ本体）の幅を基準にします。inset-inline-end: 1ch で右端から 1ch のマージンを確保しているため、左端にも同量のマージンを残すよう calc(100% - 1ch) で最大幅を制約しています。これにより、ポップオーバーの幅がエディタ幅を超えることなく、ビューポート内に収まるようになります。

テスト側では test/browser/tests/prompts/mentions.test.js に回帰テストが追加されました。ビューポートを 400×600px、エディタ幅を 150px の右寄せに設定し、@ を入力してポップオーバーを表示させた後、getBoundingClientRect() で取得した left と right がそれぞれ 0 以上・400 以下であることを検証します。

設計判断

論理プロパティ（inline-size / inset-inline-*） を一貫して使用している点が注目されます。max-width ではなく max-inline-size を選んでいることで、横書き・縦書きや RTL レイアウトへの対応を維持しています。既存の inset-inline-start / inset-inline-end による制御と統一されたアプローチです。

また、1ch という単位を inset-inline-end と calc(100% - 1ch) の両方で使用することで、右端マージンと最大幅の計算が常に一致する設計になっています。マージン値を変更する場合も1箇所の修正で済むわけではありませんが、視覚的な対称性と意図の明確さを優先した選択といえます。

まとめ

CSS の論理プロパティを一貫して活用しつつ、max-inline-size の1行追加という最小限の変更でビューポートオーバーフローを解消しています。回帰テストも同時に追加されており、狭いビューポートや右寄せレイアウトでの再発を防ぐ体制が整いました。