アドレスバーを考慮した変更をより良い実装に変更したい

[yuki-snow1823]

Ref: #198

こちらのPRで実装していただいたおかげで、FullModalを使用している箇所で画面の縦幅いっぱいに表示されていました。

具体的にはカラーの絞り込みの画面で、モーダルウィンドウの下の商品リストが表示されなくなりました。
https://suzuri.jp/categories/t-shirts

一方で、この実装ではモーダルウィンドウのpaddingを引き伸ばしているため実機で動作を確認するとアドレスバーがない時に下が結構開いたり、逆にカラーの一覧が表示しきれずにボタンに重なってしまうなどの問題が挙げられます。

まだ実装の方法は検討できていないのですが、CSS、JSを駆使して下記の要件で修正したいです。

• FullModalを使用する際に、アドレスバーの有無関係なく縦幅いっぱいにモーダルが表示される
• カラーの絞り込み画面において、モーダル内の要素（カラーのチェック）がボタンに重ならない

#198 から引用

これは、height:-webkit-fill-available;があるせいで、アドレスが出るとちょうど100vhになるけどスクロールしてアドレスバーが消えると裾足らずでカートボタンが見えてしまうから 🥲
（カートの場合は必ず一番上にスクロールされている状態で開くので、アドレスバーが常に表示されている状態になり問題がないけど、リクエストはある場合とない場合がある...）

なのでsafariの時のみ使用している「height:-webkit-fill-available;」を外して、ボタン下にアドレスバー分のpaddingがつくように新しくclassを作って、リクエストモーダルの時はそのclassを使用するようにするといいかも、と思って現PRで試してみています。アドレスバーがない時に下が結構空いてしまうのが少し嫌だけど...