Radix Popover の高さは固定 height ではなく available-height の max-height を使う / PaPut

mizulba

約2か月前

Radix Popover の高さは固定 height ではなく available-height の max-height を使う

フロントエンド

CSS

Radix の Popover はトリガー位置や衝突回避に応じて表示位置が变わるため、コンテンツ高さを height: calc(100vh - header - margin) のように固定すると、トリガーが画面下部にあるときに下端が viewport をはみ出し、内部スクロールで最下部まで到達できなくなる。対策は max-height: var(--radix-popover-content-available-height) を使い、トリガーの実際の位置から見た利用可能高さに合わせること。ヘッダー高さが状況で変わる(例: 管理者ヘッダー表示時)UIで特に問題になる。