(spindle-ui): SemiModalのデザインがブラウザによって異なる

[yanagi0602]

概要

SemiModalを利用した際にブラウザ間でデザイン差分が生まれているが、これは意図した挙動でしょうかという質問になります。

バージョン

0.62.1

具体的な内容

SemiModalのStoryでSemiModal内の.spui-SemiModal-contents要素を確認すると、以下のような差分が存在します。

Chrome

コンテンツの右側の余白が広い

Safari

コンテンツの右側の余白が広い

FireFox

コンテンツが幅いっぱいに表示されている

差分が生まれている理由

FireFoxはスクロールバーの領域を確保せず、Safari・Chromeはoverflowコンテンツの有無に関わらずスクロールバーの領域を確保するためこの差分が生まれていそうです。

Chromeでのスクロール可能状態

FireFoxでのスクロール可能状態