Fluent UI BlazorのSelectボックスで選択中に項目の文字をすべて表示させたい！

前提

.NET 7
Microsoft.Fast.Components.FluentUI 3.0.1

始めに

Fluent UI BlazorではSelectボックスをプルダウンしたときの項目の文字列が長い場合途中で切れてしまいます。
Selectボックスの幅を大きくできればよいのですが表示すべき項目が多いときなどなかなか難しい場合もあります。こうしたとき、プルダウン中だけでも途中で切れないようにしたいといった要望があります。標準的な機能ではこれについては現在のところ対応してませんのでCSSで対応することとなりますがどのように対応していったらよいかを書いていきます。

最初のコード

index.razor

<div style="width: 150px">
    <FluentSelect Items="select" TOption="string" Width="100%"/>
</div>

@code {
    IQueryable<string> select = new List<string> { "Microsoft MVP for Developer Technologes", "Microsoft MVP for  AI", "Microsoft MVP for  Windows and Devices for IT" }.AsQueryable();
}

プルダウンした項目について途中で切れて表示されていることが確認できます。
ここから、選択中だけでも切れないようにしていきたいと思います。

開発者ツールでどこの要素を変更するか決める

まず、プルダウンした時の表示要素として<fluent-select>内の<div class="listbox">であるように見えました。この要素は#shadow-root(open)となっていました。

次に、list-boxのスタイルシートをみるとwidth:100%;となっていましたのでこれが原因のようです。
試しにここをwidth:auto;と書き換えてみたところ以下のように表示されました。

なので、ここのスタイルを変更すれば良さそうです。

変更手順

まず、このrazorのcssを作成します。例えば、index.razorについてだったらindex.razor.cssを作成します。

index.razor.css

::deep fluent-select::part(listbox) {
    width: auto!important;
}

fluent-selectタグ内のdivタグのlistboxクラスについて変更したかったのでこのように書きました。

上記のように変更されていることが確認できます。