ModalBaseコンポーネントの調整

StatusDone

TeamInstansys

Assigneeyasuhisa.hiraga@instansys.co.jp

PriorityHigh

Created2026/01/30 07:24

Completed2026/02/09 02:12

Archived2026/02/16 02:41

View on Linear (if still available)

Description

ほぼ全てのModalのベースになっているModalBaseコンポーネントが、いろんな画面サイズに対応しているか確認して調整する。childrenが大きい時などでもレイアウトが崩れないかなども確認する

他のモーダルの修正する前に、早めに対応すべき。

Comments (1)

yasuhisa.hiraga@instansys.co.jp2026/02/04 01:09

childrenの要素が大きい場合、ModalBaseを使うときに、childrenのclassNameに

max-h-[calc(60*var(--gvh))] overflow-y-scroll

を与えておけば良いかも。 max-h-[calc(60*var(--gvh))] を使っておけばおおよその画面サイズ(height300~)でスクリーンからはみ出ることはない。

<ModalBase 
...
>
 <div className="bg-white max-h-[calc(60*var(--gvh))] overflow-y-scroll">
   子要素
  <div className="h-[500px] bg-[#ff0]">hoge</div>
 </div>
</ModalBase>