intropage: fix page wheel-scroll over chart panels and Panel Details overflow

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

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;

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,
 		});