From 9a695b02e0c5165027f3eb51cb10118bb2aafe3d Mon Sep 17 00:00:00 2001 From: TheWitness Date: Thu, 22 Oct 2026 10:56:03 -0400 Subject: [PATCH] intropage: fix page wheel-scroll over chart panels and Panel Details overflow resizeCharts() sized every chart from .panel_wrapper height - 30, a formula from the pre-card layout. .panel_wrapper now holds the 34px card header and padded body, so charts came out ~19px taller than their chart_wrapper and overflowed .ccCardBody. cards.css gives the body overflow-x: auto, which makes overflow-y auto as well, so each chart panel became a tiny nested scroller that captured the mouse wheel and the page would not scroll. Pie/treemap charts (no fixed wrapper height) also grew ~18px on every window resize. Keep the server-sized chart height, and stop card bodies from scrolling vertically (cards already grow to fit their content). Themes such as deepness force .ui-dialog-content to overflow: visible, so long Panel Details content spilled under the Close button pane with no scrollbar. Restore overflow: auto on the details dialog content (with clear: both so the new BFC is not squeezed beside the floated title that overhangs the fixed-height titlebar) and cap the dialog to the viewport. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- CHANGELOG.md | 2 ++ css/common.css | 16 ++++++++++++++++ includes/intropage.js | 9 +++++++-- 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c9e6f2a..0b3399e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ --- develop --- +* issue: Fix the dashboard page not scrolling with the mouse wheel over chart panels: charts were sized from the whole card (header included) and overflowed the card body, turning it into a nested scroller that captured the wheel; charts now keep their server-sized height (which also stops pie/treemap charts growing on every window resize) and card bodies no longer scroll vertically +* issue: Keep long Panel Details content inside the dialog and scrollable, instead of spilling under the Close button pane, on themes (e.g. deepness) that force `.ui-dialog-content` to `overflow: visible`; the dialog height is also capped to the viewport * issue: Render dashboard panels with a shared, self-contained card chrome (bundled `includes/cards/cards.css` + `cards.js`, no cross-plugin dependency): a left-hand drag handle and unified per-card tools (grow/shrink height, maximize, reload, remove), replacing jQuery UI Sortable with a keyboard-accessible drag; growing/shrinking a panel now resizes it immediately before the persist+reload round-trip * issue: Show the panel "Reload Panel" glyph as a refresh icon (fa-sync-alt) that spins while the panel reloads, instead of the retweet glyph * issue: Tune the panel titlebar severity palette per theme so green (good), orange (warning) and red (bad) read as those colors but with theme-appropriate tone and legible text on every theme (replaces the garish/olive green, pure `yellow` and black-on-mid-green text that were copied across all themes); deepness already had this treatment and is unchanged diff --git a/css/common.css b/css/common.css index 689c117..54bcf72 100644 --- a/css/common.css +++ b/css/common.css @@ -73,6 +73,13 @@ min-height: 180px; } +/* Cards grow to fit their content, so the body never needs its own vertical + scroller. cards.css sets overflow-x: auto, which implicitly makes overflow-y + auto too; a few px of overflow then traps the mouse wheel inside the card. */ +#panel_container .ccCardBody { + overflow-y: hidden; +} + .chart_wrapper { position: relative; margin: auto; @@ -127,6 +134,15 @@ scroll: auto; } +/* Some themes (e.g. deepness) force .ui-dialog-content to overflow: visible, + which lets long details spill under the button pane with no scrollbar. + clear: both stops the now-BFC content from sitting beside the floated title + when it overhangs the fixed-height titlebar. */ +.ui-dialog #overlay.ui-dialog-content { + overflow: auto; + clear: both; +} + #overlay_detail { text-align: left; overflow: auto; diff --git a/includes/intropage.js b/includes/intropage.js index 66e6f6c..4c8dca5 100644 --- a/includes/intropage.js +++ b/includes/intropage.js @@ -51,7 +51,12 @@ function resizeCharts() { var windWidth = $(window).width() - 34; var panelWidth = $(this).closest('.panel_wrapper').width() - 34; var width = Math.min(windWidth, panelWidth); - var height = $(this).closest('.panel_wrapper').height() - 30; + + // Keep the server-sized chart height. .panel_wrapper also holds the card + // header and body padding, so deriving the height from it oversizes the + // chart, overflows .ccCardBody and turns it into a nested scroller that + // swallows mouse-wheel scrolling of the page. + var height = $(this).height(); if (panels[chart] != undefined) { panels[chart].resize({ width: width, height:height }); @@ -514,7 +519,7 @@ function intropage_open_details(panel_id) { icon: 'ui-icon-heart' }], width: width, - maxHeight: 650, + maxHeight: Math.min(650, $(window).height() - 40), resizable: true, title: intropage_text_panel_details, });