Refactor print styles and enhance chart configuration for better visualization

- Adjusted chart grid color for improved contrast in visualizations.
- Implemented print-specific styles to ensure proper layout and formatting on A4 paper.
- Enhanced chart configuration in JavaScript to include grid line width and tick border dash for clearer data representation.
- Updated HTML to streamline print functionality, replacing the PDF export button with a direct print command.

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 */
+  /* Tables: fit to page, allow column shrink */
-  main {
+  .overflow-x-auto {
-    padding-top: 0.5rem !important;
+    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 {

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

templates/base.html

@@ -7,8 +7,11 @@
     <title>{% block title %}SWatcher{% endblock %}</title>
     <link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
     <link rel="stylesheet" href="{% static 'css/output.css' %}">
-    <script src="{% static 'js/html2canvas-pro.min.js' %}"></script>
+    <style media="print">
-    <script src="{% static 'js/jspdf.umd.min.js' %}"></script>
+      /* Force A4 content width so print layout does not use screen width */
+      html, body { width: 180mm !important; min-width: 180mm !important; max-width: 180mm !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; }
+      body * { min-width: 0 !important; box-sizing: border-box !important; }
+    </style>
     {% block imports %}
     {% endblock %}
     {% block css %}
@@ -22,7 +25,7 @@
         </div>
         <div class="navbar-end">
             <div class="px-1 flex items-center gap-3 pr-10">
-                <button type="button" id="pdf-export-btn" class="btn btn-ghost btn-sm no-print" onclick="exportDashboardToPdf()" title="Save as PDF" aria-label="Save as PDF">
+                <button type="button" id="pdf-export-btn" class="btn btn-ghost btn-sm no-print" onclick="window.print()" title="Save as PDF (opens print dialog; choose &quot;Save as PDF&quot;)" aria-label="Save as PDF">
                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                     </svg>
@@ -74,7 +77,6 @@
             localStorage.setItem('theme', newTheme);
         });
     </script>
-    <script src="{% static 'js/export-pdf.js' %}"></script>
     <script>
         (function() {
             function updateSourceStatus(el, label, data) {