diff --git a/client/components/main/popup.css b/client/components/main/popup.css index 7ecb807b3..877c48bd3 100644 --- a/client/components/main/popup.css +++ b/client/components/main/popup.css @@ -767,3 +767,124 @@ body.mobile-mode .pop-over .content-wrapper { overflow-y: auto !important; overflow-x: hidden !important; } + +/* ============================================ + FIX: List actions popup overflow (Issue #6221) + Prevents menu from overflowing outside viewport + ============================================ */ + +/* General fix for all popups with many items */ +.pop-over .pop-over-list { + max-height: 60vh; + overflow-y: auto; + overflow-x: hidden; +} + +/* Specific fix for list actions menu */ +.pop-over[data-popup="listActionsPopup"] { + max-height: 85vh !important; + overflow-y: auto !important; +} + +.pop-over[data-popup="listActionsPopup"] .content-wrapper { + max-height: calc(85vh - 50px) !important; + overflow-y: auto !important; +} + +/* Prevent any popup from overflowing viewport */ +.pop-over { + max-height: 90vh !important; + display: flex !important; + flex-direction: column !important; +} + +.pop-over .content-wrapper { + flex: 1 1 auto !important; + overflow-y: auto !important; + min-height: 0 !important; +} + +.pop-over .content-container { + flex: 1 1 auto !important; + display: flex !important; + flex-direction: column !important; + min-height: 0 !important; +} + +.pop-over .content { + flex: 1 1 auto !important; + overflow-y: auto !important; + min-height: 0 !important; +} + +/* Keep header fixed while content scrolls */ +.pop-over .header { + flex-shrink: 0 !important; +} + +/* Mobile-specific adjustments */ +@media screen and (max-width: 800px) { + .pop-over[data-popup="listActionsPopup"] { + max-height: 100vh !important; + } + + .pop-over[data-popup="listActionsPopup"] .content-wrapper { + max-height: calc(100vh - 48px) !important; + } +} +/* STRONGER FIX - Override inline styles */ +.pop-over[style*="height"], +.pop-over[style*="max-height"] { + max-height: 80vh !important; + height: auto !important; + overflow-y: auto !important; +} + +.pop-over[style*="height"] .content-wrapper, +.pop-over[style*="max-height"] .content-wrapper { + max-height: calc(80vh - 60px) !important; + height: auto !important; + overflow-y: auto !important; +} + +/* Force list popups to have a max height and scroll */ +.pop-over .pop-over-list { + max-height: 300px !important; + overflow-y: auto !important; +} + +/* Make sure the popup doesn't grow too tall */ +.pop-over:has(.pop-over-list) { + max-height: 400px !important; + height: auto !important; +} + +/* For the list actions menu specifically */ +[data-popup="listActionsPopup"] .pop-over-list, +.js-open-list-menu + .pop-over .pop-over-list { + max-height: 350px !important; + overflow-y: auto !important; +} + +/* ============================================ + FIX: List actions popup overflow (Issue #6221) + ============================================ */ + +/* Force list popups to have a max height and scroll */ +.pop-over .pop-over-list { + max-height: 300px !important; + overflow-y: auto !important; +} + +/* Make sure the popup doesn't grow too tall */ +.pop-over:has(.pop-over-list) { + max-height: 400px !important; + height: auto !important; +} + +/* For the list actions menu specifically */ +[data-popup="listActionsPopup"] .pop-over-list, +.js-open-list-menu + .pop-over .pop-over-list { + max-height: 350px !important; + overflow-y: auto !important; +}