Minor layout responsiveness adjustments

src/features/consumption/chart.js

@@ -153,7 +153,7 @@ function createConsumptionChart({
 
   function createConsumptionSvg(points, period, hasPartialLatestPoint, activeSeries, tooltip) {
     const width = 1000;
-    const height = 320;
+    const height = 350;
     const plot = { left: 62, top: 24, right: 980, bottom: 258 };
     const plotWidth = plot.right - plot.left;
     const plotHeight = plot.bottom - plot.top;

src/features/consumption/plan-detail.css

@@ -1,3 +1,35 @@
+/* Scope sizing to Cloud Consumption, not other dialogs sharing its components. */
+[data-consumption-layout="compact"] .opportunities-extension-account-plans-header { padding: 10px 12px; gap: 12px; }
+[data-consumption-layout="compact"] .opportunities-extension-account-plans-header h2 { font-size: 16px; line-height: 22px; }
+[data-consumption-layout="compact"] .opportunities-extension-account-plans-header p { font-size: 12px; line-height: 16px; margin-top: 3px; overflow-wrap: anywhere; }
+[data-consumption-layout="compact"] .opportunities-extension-icon-button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 4px; }
+[data-consumption-layout="compact"] .opportunities-extension-account-plans-tabs { padding: 4px 12px 0; }
+[data-consumption-layout="compact"] .opportunities-extension-account-plan-tab { min-height: 30px; padding: 4px 8px; font-size: 12px; }
+[data-consumption-layout="compact"] .opportunities-extension-account-plan-panel { padding: 8px 12px; }
+[data-consumption-layout="compact"] .opportunities-extension-account-plan-details { gap: 0 12px; }
+[data-consumption-layout="compact"] .opportunities-extension-account-plan-details > div { grid-template-columns: minmax(85px, 35%) minmax(0, 1fr); min-height: 32px; padding: 4px 0; gap: 6px; }
+[data-consumption-layout="compact"] .opportunities-extension-account-plan-details dt { font-size: 11px; line-height: 16px; }
+[data-consumption-layout="compact"] .opportunities-extension-account-plan-details dd { font-size: 12px; line-height: 16px; }
+[data-consumption-layout="compact"] .opportunities-extension-consumption-trend { margin-top: 8px; padding-top: 6px; }
+[data-consumption-layout="compact"] .opportunities-extension-consumption-periods button { min-height: 28px; padding: 4px 8px; font-size: 12px; }
+[data-consumption-layout="compact"] .opportunities-extension-consumption-navigation { grid-template-columns: 28px minmax(120px, auto) 28px; min-height: 30px; }
+[data-consumption-layout="compact"] .opportunities-extension-consumption-navigation strong { font-size: 12px; }
+[data-consumption-layout="compact"] .opportunities-extension-consumption-navigation-button { width: 28px; height: 28px; }
+[data-consumption-layout="compact"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
+[data-consumption-layout="compact"] .opportunities-extension-consumption-svg { height: 100%; max-height: 100%; min-width: 0; }
+[data-consumption-layout="compact"] .opportunities-extension-consumption-legend button { font-size: 11px; padding: 4px; gap: 5px; }
+
+/* Small viewports must scroll rather than clip details or collapse the chart. */
+@media (max-height: 560px), (max-width: 700px) {
+  [data-consumption-layout="compact"] .opportunities-extension-account-plans-panels { overflow: auto; }
+  [data-consumption-layout="compact"] .opportunities-extension-account-plan-panel { height: auto; min-height: 100%; grid-template-rows: auto minmax(280px, 1fr); }
+}
+@media (max-width: 700px) {
+  [data-consumption-layout="compact"] .opportunities-extension-account-plan-details { grid-template-columns: minmax(0, 1fr); }
+  [data-consumption-layout="compact"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
+  [data-consumption-layout="compact"] .opportunities-extension-consumption-legend { display: flex; flex-wrap: wrap; }
+}
+
 .opportunities-extension-plan-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
 .opportunities-extension-consumption-trend-header { align-items: center; justify-content: space-between; gap: 12px; }
 .opportunities-extension-consumption-trend-header > .opportunities-extension-plan-detail-badges { min-width: 0; }

src/features/consumption/plans-view.js

@@ -48,6 +48,7 @@ function createConsumptionPlansView({
 
     const dialog = document.createElement("div");
     dialog.className = "opportunities-extension-account-plans-dialog";
+    dialog.setAttribute("data-consumption-layout", "compact");
 
     const header = createConsumptionHeader({
       titleId: "opportunities-extension-account-plans-title",

src/features/install-base/styles.css

@@ -1,15 +1,46 @@
 .opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog {
   width: min(1700px, 100%);
 }
+.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header {
+  padding: 10px 12px;
+  gap: 12px;
+}
+.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header h2 {
+  font-size: 16px;
+  line-height: 22px;
+}
+.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header p {
+  font-size: 12px;
+  line-height: 16px;
+  margin-top: 3px;
+  overflow-wrap: anywhere;
+}
+.opportunities-extension-install-base-dialog .opportunities-extension-icon-button {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  min-height: 28px;
+  padding: 4px;
+}
+.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-toolbar {
+  padding: 8px 12px;
+}
+.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-search {
+  width: min(320px, 100%);
+  height: 32px;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 20px;
+}
 .opportunities-extension-install-base-content {
   min-width: 0;
   min-height: 0;
   overflow: auto;
   scrollbar-gutter: stable;
 }
-.opportunities-extension-install-base-message { margin: 16px; font-size: 13px; }
+.opportunities-extension-install-base-message { margin: 10px 12px; font-size: 12px; line-height: 16px; }
 .opportunities-extension-install-base-table {
-  width: 100%; min-width: 1400px; table-layout: fixed; border-collapse: collapse; font-size: 12px;
+  width: 100%; min-width: 1120px; table-layout: fixed; border-collapse: collapse; font-size: 11px;
 }
 .opportunities-extension-install-base-table col { width: 7%; }
 .opportunities-extension-install-base-table .install-base-col-partyName { width: 12%; }
@@ -19,7 +50,7 @@
 .opportunities-extension-install-base-table .install-base-col-quantityType { width: 8%; }
 .opportunities-extension-install-base-table th,
 .opportunities-extension-install-base-table td {
-  padding: 12px 8px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;
+  padding: 8px 6px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;
   border-bottom: 1px solid #e8e5e1; line-height: 1.4;
 }
 .opportunities-extension-install-base-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }
@@ -27,7 +58,7 @@
 .opportunities-extension-install-base-table td[data-format="quantity"] { text-align: right; font-variant-numeric: tabular-nums; }
 .opportunities-extension-install-base-table td[data-format="date"] { white-space: nowrap; }
 .opportunities-extension-install-base-status {
-  display: inline-block; padding: 3px 6px; border-radius: 12px; font-size: 10px; font-weight: 600;
+  display: inline-block; padding: 2px 5px; border-radius: 12px; font-size: 10px; font-weight: 600;
   color: #5f5a55; background: #eceae8; white-space: nowrap;
 }
 .opportunities-extension-install-base-status[data-status="ACTIVE"] { color: #17693a; background: #e1f1e5; }

src/features/opportunities/styles.css

@@ -1,3 +1,112 @@
+/* Compact filters use available CSS width, including Windows display scaling. */
+.opportunities-extension-form {
+  display: grid;
+  grid-template-columns: max-content minmax(110px, 1fr) minmax(110px, 1fr) minmax(145px, 180px) max-content max-content;
+  align-items: end;
+  gap: 12px;
+  min-height: 0;
+  padding: 12px;
+}
+
+.opportunities-extension-form > * {
+  min-width: 0;
+  width: 100%;
+  max-width: none;
+  grid-template-rows: auto 32px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.opportunities-extension-form > * > span:first-child {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.opportunities-extension-form .opportunities-extension-select-wrap {
+  width: 100%;
+}
+
+.opportunities-extension-form .opportunities-extension-field select,
+.opportunities-extension-form .opportunities-extension-customer-filter-trigger,
+.opportunities-extension-form .opportunities-extension-table-search-field input {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 32px;
+  min-height: 32px;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.opportunities-extension-form .opportunities-extension-field select,
+.opportunities-extension-form .opportunities-extension-customer-filter-trigger {
+  padding-right: 26px;
+}
+
+.opportunities-extension-form .opportunities-extension-select-wrap::after,
+.opportunities-extension-form .opportunities-extension-customer-filter-trigger::after {
+  right: 10px;
+  border-left-width: 4px;
+  border-right-width: 4px;
+  border-top-width: 5px;
+}
+
+.opportunities-extension-form .opportunities-extension-stage-filter-controls,
+.opportunities-extension-form .opportunities-extension-status-filter-controls {
+  flex-wrap: nowrap;
+  gap: 4px;
+}
+
+.opportunities-extension-form .opportunities-extension-stage-filter-button,
+.opportunities-extension-form .opportunities-extension-status-filter-button {
+  min-height: 28px;
+  padding: 4px 7px;
+  font-size: 11px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+/* Native select intrinsic sizing includes its longest option, not just the selection. */
+@media (min-width: 1151px) {
+  .opportunities-extension-form > .opportunities-extension-field,
+  .opportunities-extension-form .opportunities-extension-select-wrap,
+  .opportunities-extension-form .opportunities-extension-field select {
+    width: max-content;
+    max-width: none;
+  }
+}
+
+@media (max-width: 1150px) {
+  .opportunities-extension-form {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .opportunities-extension-form > .opportunities-extension-status-filter,
+  .opportunities-extension-form > .opportunities-extension-stage-filter {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 700px) {
+  .opportunities-extension-form {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .opportunities-extension-form .opportunities-extension-stage-filter-controls,
+  .opportunities-extension-form .opportunities-extension-status-filter-controls {
+    flex-wrap: wrap;
+  }
+  .opportunities-extension-form > .opportunities-extension-status-filter,
+  .opportunities-extension-form > .opportunities-extension-stage-filter {
+    grid-template-rows: auto auto;
+  }
+}
+
+@media (max-width: 420px) {
+  .opportunities-extension-form { grid-template-columns: minmax(0, 1fr); }
+  .opportunities-extension-form > .opportunities-extension-status-filter,
+  .opportunities-extension-form > .opportunities-extension-stage-filter { grid-column: auto; }
+}
+
 /* Keep layout rules on the outer table, never on expanded product tables. */
 .opportunities-extension-table[data-opportunities-layout="inline-actions"] {
   width: 100%;

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");