pporto/opportunities-extension
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

Minor layout responsiveness adjustments

Browse Source
This commit is contained in:
Paulo Porto
2026-09-23 23:54:22 -03:00
parent b92d75f558
commit b8c493fc20
10 changed files with 216 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/consumption/chart.js
View File

@@ -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;

32
src/features/consumption/plan-detail.css
View File

@@ -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; }

1
src/features/consumption/plans-view.js
View File

@@ -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",