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;/);
+});

tests/installBase.test.cjs

@@ -3,6 +3,16 @@ const { test } = require("node:test");
 const { loadBackground, response, plain } = require("./support/characterization.cjs");
 const { loadApplication } = require("./support/application.cjs");
 
+test("installed base compact layout retains all columns and scopes toolbar sizing to its dialog", () => {
+  const css = require("node:fs").readFileSync(require("node:path").join(__dirname, "../src/features/install-base/styles.css"), "utf8");
+  assert.match(css, /min-width: 1120px/);
+  assert.match(css, /\.opportunities-extension-install-base-table\s*\{[^}]*font-size: 11px/);
+  assert.match(css, /\.opportunities-extension-install-base-dialog \.opportunities-extension-customer-table-search\s*\{[^}]*height: 32px/);
+  assert.match(css, /\.opportunities-extension-install-base-dialog \.opportunities-extension-account-plans-header h2\s*\{[^}]*font-size: 16px/);
+  assert.match(css, /overflow-wrap: anywhere/);
+  assert.doesNotMatch(css, /text-overflow: ellipsis|overflow: hidden|display: none/);
+});
+
 const authorizations = {
   accountSummary: { name: "Account-Ti-Authorization", value: "synthetic-summary" },
   installBase: { name: "synthetic-provider-header", value: "synthetic-installed" }

tests/opportunityTable.test.cjs

@@ -68,6 +68,13 @@ test("ten columns retain their links and put product/customer controls below the
   assert.equal(findClass(h.cell("customer"), "opportunities-extension-products-count"), undefined);
 });
 
+test("desktop filter widths fit Reference content and allocate free space to Customer and Owner", () => {
+  const css = fs.readFileSync(path.join(__dirname, "../src/features/opportunities/styles.css"), "utf8");
+  assert.match(css, /grid-template-columns: max-content minmax\(110px, 1fr\) minmax\(110px, 1fr\) minmax\(145px, 180px\) max-content max-content/);
+  assert.match(css, /@media \(min-width: 1151px\)[\s\S]*?\.opportunities-extension-field select\s*\{\s*width: max-content;/);
+  assert.match(css, /@media \(max-width: 1150px\)/);
+});
+
 test("ramp months preserve zero and flag missing values beside the product count", () => {
   const h = setup();
   const badge = () => findClass(h.cell("name"), "opportunities-extension-products-ramp");