diff --git a/static/css/main.css b/static/css/main.css index 672fd8e..0c9b4a5 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -96,7 +96,7 @@ --border: 1px; --depth: 1; --noise: 0; - --chart-grid-color: color-mix(in oklch, var(--color-base-content) 22%, transparent); + --chart-grid-color: color-mix(in oklch, var(--color-base-content) 10%, transparent); } @plugin "daisyui/theme" { @@ -133,7 +133,7 @@ --border: 1px; --depth: 1; --noise: 0; - --chart-grid-color: color-mix(in oklch, var(--color-base-content) 22%, transparent); + --chart-grid-color: color-mix(in oklch, var(--color-base-content) 10%, transparent); } /* VTB gradient (both themes) */ @@ -229,16 +229,64 @@ label.swap:focus-within:not(.theme-toggle) { @source "../../templates"; /* --- Print (Save as PDF) --- */ +@page { + size: A4; + margin: 15mm; +} + @media print { + /* Force printable area width (A4 minus margins) so layout doesn't use screen width */ + html { + width: 180mm !important; + min-width: 180mm !important; + max-width: 180mm !important; + margin: 0 !important; + padding: 0 !important; + overflow-x: hidden !important; + } + body { + width: 180mm !important; + min-width: 180mm !important; + max-width: 180mm !important; + margin: 0 !important; + padding: 0 !important; + overflow-x: hidden !important; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + box-sizing: border-box !important; + } + body *, + body *::before, + body *::after { + box-sizing: border-box !important; + } + /* Allow flex/grid children to shrink so they don't force overflow */ + body * { + min-width: 0 !important; + } .no-print { display: none !important; } .print-only { display: block !important; } + /* Main and content: stay within body width */ + main.container { + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + padding: 0.5rem 0.5rem 0 !important; + min-width: 0 !important; + } + #dashboard-content { + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + overflow-x: hidden !important; + padding: 0.5rem 0 !important; + } /* Keep card backgrounds and colors when printing */ .card, - main, .badge, .progress { -webkit-print-color-adjust: exact; @@ -253,9 +301,39 @@ label.swap:focus-within:not(.theme-toggle) { break-inside: avoid; page-break-inside: avoid; } - /* Reduce top padding so content starts higher */ - main { - padding-top: 0.5rem !important; + /* Tables: fit to page, allow column shrink */ + .overflow-x-auto { + max-width: 100% !important; + overflow-x: visible !important; + } + .table { + table-layout: fixed !important; + width: 100% !important; + max-width: 100% !important; + } + .table td, + .table th { + overflow: hidden; + text-overflow: ellipsis; + } + /* Chart: constrain so it doesn't overflow (canvas has fixed size from Chart.js) */ + section[aria-label="CPU distribution chart"] .card-body { + max-width: 100% !important; + overflow: hidden !important; + } + section[aria-label="CPU distribution chart"] .h-48, + section[aria-label="CPU distribution chart"] [class*="h-48"] { + max-width: 100% !important; + min-height: 10rem !important; + } + section[aria-label="CPU distribution chart"] canvas { + max-width: 100% !important; + height: auto !important; + } + /* Navbar fits page width */ + .navbar { + width: 100% !important; + max-width: 100% !important; } } @media screen { diff --git a/static/js/dashboard.js b/static/js/dashboard.js index 410499f..d9419b7 100644 --- a/static/js/dashboard.js +++ b/static/js/dashboard.js @@ -265,7 +265,21 @@ } }, scales: { - y: { beginAtZero: true, max: 100, grid: { drawBorder: false, color: gridColor }, ticks: { color: textColor, callback: function(value) { return value + '%'; } } }, + y: { + beginAtZero: true, + max: 100, + grid: { + drawBorder: false, + color: gridColor, + lineWidth: 0.5, + tickBorderDash: [4, 4] + }, + ticks: { + stepSize: 25, + color: textColor, + callback: function(value) { return value + '%'; } + } + }, x: { grid: { display: false }, ticks: { display: false }, barPercentage: 1, categoryPercentage: 0.85 } } } diff --git a/templates/base.html b/templates/base.html index 02537e4..656d7a4 100644 --- a/templates/base.html +++ b/templates/base.html @@ -7,8 +7,11 @@