Fix dashboard charts rendering and compact layout

Fixes:
- Chart rendering: добавил явную высоту chart-card (240px) и flexbox layout
- Canvas теперь занимает 100% родительского контейнера
- Убрал заголовок "Host Metrics" (избыточно)
- Добавил console.log для отладки загрузки метрик

Compact layout (всё на одну страницу без скролла):
- dashboard padding: 32px → 16px
- page-header margin: 32px → 16px, h1: 32px → 24px
- stats-grid gap: 16px → 12px, margin: 32px → 16px
- metrics-section padding: 24px → 16px
- charts-grid gap: 24px → 12px, min-width: 500px → 450px
- chart-card height: 300px → 240px, padding: 20px → 12px

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/views/superadmin/DashboardView.vue

@@ -73,8 +73,6 @@
 
     <!-- Host Metrics Charts -->
     <div class="metrics-section">
-      <h2>Host Metrics</h2>
-
       <div class="charts-grid">
         <!-- CPU Chart -->
         <div class="chart-card">
@@ -264,15 +262,22 @@ async function loadHostMetrics() {
     const { data } = await axios.get('/superadmin/monitoring/host-metrics/recent', {
       params: { limit: 30 }
     })
+    console.log('Host metrics loaded:', data.metrics.length, 'records')
     hostMetrics.value = data.metrics.reverse() // Oldest first
+    console.log('Calling updateCharts()...')
     updateCharts()
   } catch (error) {
     console.error('Failed to load host metrics:', error)
+    console.error('Error details:', error.response?.data)
   }
 }
 
 function updateCharts() {
-  if (hostMetrics.value.length === 0) return
+  console.log('updateCharts() called, metrics count:', hostMetrics.value.length)
+  if (hostMetrics.value.length === 0) {
+    console.warn('No metrics data, skipping chart update')
+    return
+  }
 
   const labels = hostMetrics.value.map(m =>
     new Date(m.timestamp).toLocaleTimeString('en-US', {
@@ -280,6 +285,7 @@ function updateCharts() {
       minute: '2-digit'
     })
   )
+  console.log('Chart labels:', labels)
 
   // CPU Chart
   cpuChartData.value = {
@@ -300,6 +306,7 @@ function updateCharts() {
       }
     ]
   }
+  console.log('CPU chart data set:', cpuChartData.value.datasets[0].data.length, 'points')
 
   // Memory Chart
   memoryChartData.value = {
@@ -458,14 +465,14 @@ onUnmounted(() => {
 
 <style scoped>
 .dashboard {
-  padding: 32px;
+  padding: 16px;
   max-width: 1600px;
   margin: 0 auto;
 }
 
 /* Alert Banner */
 .alerts-section {
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .alert-banner {
@@ -564,27 +571,27 @@ onUnmounted(() => {
 
 /* Page Header */
 .page-header {
-  margin-bottom: 32px;
+  margin-bottom: 16px;
 }
 
 .page-header h1 {
-  font-size: 32px;
+  font-size: 24px;
   font-weight: 700;
   color: #1a202c;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
 
 .page-header p {
   color: #718096;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 /* Device Stats */
 .stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 16px;
-  margin-bottom: 32px;
+  gap: 12px;
+  margin-bottom: 16px;
 }
 
 .stat-card {
@@ -639,47 +646,56 @@ onUnmounted(() => {
 /* Metrics Section */
 .metrics-section {
   background: white;
-  border-radius: 12px;
-  padding: 24px;
+  border-radius: 8px;
+  padding: 16px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .metrics-section h2 {
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 600;
   color: #1a202c;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .charts-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+  gap: 12px;
 }
 
 .chart-card {
   background: #f9fafb;
-  border-radius: 8px;
-  padding: 20px;
-  min-height: 300px;
+  border-radius: 6px;
+  padding: 12px;
+  height: 240px;
+  display: flex;
+  flex-direction: column;
 }
 
 .chart-card h3 {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
   color: #374151;
-  margin-bottom: 16px;
+  margin-bottom: 8px;
+  flex-shrink: 0;
+}
+
+.chart-card > div {
+  flex: 1;
+  position: relative;
 }
 
 .chart-card canvas {
-  height: 250px !important;
+  height: 100% !important;
+  width: 100% !important;
 }
 
 .chart-loading {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 250px;
+  height: 100%;
   color: #9ca3af;
   font-size: 14px;
 }