upstream/wekan
2
0 Fork 1
mirror of https://github.com/wekan/wekan.git synced 2026-11-04 17:10:08 -05:00
Code Releases 1 Activity

Fix list actions popup overflow (Issue #6221)

Browse Source 
- Add max-height: 300px to .pop-over-list
- Enable scrolling with overflow-y: auto
- Prevent popup from overflowing viewport
This commit is contained in:
RAWEN KHEFIFI committed 2026-04-23 15:42:05 +01:00
1 parent 7dbebed6db
commit 04eb8a8fbb
1 file changed
+98
Download Patch File Download Diff File Expand all files Collapse all files
client/components/main/popup.css
+98
View File
@@ -723,3 +723,101 @@ 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;
}