You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 lines
1.1 KiB
29 lines
1.1 KiB
/** |
|
* Shared Tailwind classes for menus, popovers, and selects. |
|
* Uses Radix collision CSS variables so lists fit the viewport (mobile + large font). |
|
*/ |
|
|
|
/** Dropdown / menu list vertical bound */ |
|
export const dropdownMenuMaxHeightClass = |
|
'max-h-[min(85dvh,var(--radix-dropdown-menu-content-available-height,100dvh))]' |
|
|
|
/** Popover panel vertical bound */ |
|
export const popoverMaxHeightClass = |
|
'max-h-[min(85dvh,var(--radix-popover-content-available-height,100dvh))]' |
|
|
|
/** Select viewport vertical bound */ |
|
export const selectViewportMaxHeightClass = |
|
'max-h-[min(85dvh,var(--radix-select-content-available-height,80dvh))]' |
|
|
|
/** Hover card vertical bound */ |
|
export const hoverCardMaxHeightClass = |
|
'max-h-[min(85dvh,var(--radix-hover-card-content-available-height,100dvh))]' |
|
|
|
/** Keep panels inside the screen horizontally */ |
|
export const floatingPanelMaxWidthClass = 'max-w-[min(calc(100vw-1.5rem),28rem)]' |
|
|
|
export const floatingPanelScrollClass = |
|
'popover-scroll-y min-h-0 overflow-x-hidden overflow-y-auto overscroll-contain' |
|
|
|
/** Menu rows: wrap when root font-size is large */ |
|
export const menuItemLargeTextClass = 'min-w-0 whitespace-normal'
|
|
|