サムネのような通りだが、Macの環境を新しくしてから vim やターミナル内で表示する fzf のプレビューがちょっとおかしい（ボーダーが必要な長さ分まで伸びずに内容がはみ出してしまっている）という問題が発生してた。
いろいろ弄ってて鬱陶しかったのもあり、fzf のレポジトリから各バージョンのバイナリをちまちまダウンロードしてきて試して見たところ、M1 Mac の環境だと v0.35.1 までは表示崩れが起きておらず、v0.36 から上記のような表示崩れが生じているようだった。
結論
ターミナルの locale を LANG=ja_JP.UTF-8 などに設定していると起きる。
.bashrc 等お使いのシェルのログインシェルに以下を設定した後、ターミナルを再起動する。
RUNEWIDTH_EASTASIAN=0原因の調査
原因を確かめるために fzf の v0.35.1 と v0.36 の diff を見てみたところ、man の出力に以下のような文言が追加されていた。
If you use a terminal emulator where each box-drawing character takes
2 columns, try setting RUNEWIDTH_EASTASIAN to 1. If the border is
still not properly rendered, set --no-unicode.box-drawing character がまさになのでこれっぽいがどういうことだろう。会社の仲間と相談していると「GOでTUIの表示が崩れる場合」という情報を教えていただいた。fzf は Go 製なのでまさにこれだろう。unicode の Ambiguous width な文字の扱いがライブラリのバージョンで変わったということかな？
記述されている通り、LANG=C にして再起動してみると表示が改善した。 hyper.js など別のところで表示が崩れる可能性が出てくるため locale は日本に設定を戻し、 RUNEWIDTH_EASTASIAN=0 の設定を追加してAmbiguous の文字を半角として扱うようにしたところ解決した。
おまけ
ついでに今まで特に設定してなかったが、fzf が高速になるようデフォの find じゃなくて ripgrep を使う検索を行うように変更した。
FZF_DEFAULT_COMMAND='rg --files --hidden --follow --glob "!.git/*"'–files オプションをつけることで、grep としての絞り込みを行わずに対象となっているものを全て列挙するようにする。絞り込みは後から fzf 側で行うのでこれで良し。あとは隠しファイルを表示してシンボリックリンクの先を追うようにして、.git 以下を無視するように。
ripgrep はデフォで gitignore に記述されている対象は無視するので、それも表示して欲しいなら –no-ignore オプションも追加する。