Minor layout responsiveness adjustments

tests/consumptionLayout.test.cjs

@@ -0,0 +1,15 @@
+const assert = require("node:assert/strict");
+const { test } = require("node:test");
+const fs = require("node:fs");
+const path = require("node:path");
+const read = file => fs.readFileSync(path.join(__dirname, "../src/features/consumption", file), "utf8");
+
+test("Cloud Consumption uses scoped compact controls and a chart bounded by available height", () => {
+  const css = read("plan-detail.css");
+  assert.match(read("plans-view.js"), /setAttribute\("data-consumption-layout", "compact"\)/);
+  assert.match(css, /\[data-consumption-layout="compact"\] \.opportunities-extension-consumption-svg\s*\{[^}]*height: 100%; max-height: 100%/);
+  assert.match(css, /\[data-consumption-layout="compact"\] \.opportunities-extension-account-plans-header h2\s*\{[^}]*font-size: 16px/);
+  assert.match(css, /@media \(max-height: 560px\), \(max-width: 700px\)/);
+  assert.match(css, /\.opportunities-extension-account-plans-panels \{ overflow: auto;/);
+  assert.match(read("chart.js"), /const height = 350;/);
+});