fix: mpc table markup

Author: gmlexx

web/src/App.css

@@ -410,13 +410,39 @@ body {
     overflow-x: auto;
     border-radius: 6px;
     border: 1px solid var(--color-border);
+    position: relative;
+    scroll-behavior: smooth;
+    /* Prettier scrollbar */
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-primary) var(--color-bg-card);
+}
+
+/* Webkit scrollbar styling */
+.mpc-table-container::-webkit-scrollbar {
+    height: 12px;
+}
+
+.mpc-table-container::-webkit-scrollbar-track {
+    background: var(--color-bg-card);
+    border-radius: 6px;
+}
+
+.mpc-table-container::-webkit-scrollbar-thumb {
+    background: var(--color-primary);
+    border-radius: 6px;
+    border: 2px solid var(--color-bg-card);
+}
+
+.mpc-table-container::-webkit-scrollbar-thumb:hover {
+    background: #3b82f6;
 }
 
 .mpc-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.7rem;
-    table-layout: fixed;
+    table-layout: auto;
+    white-space: nowrap;
 }
 
 .mpc-table thead {
@@ -432,21 +458,64 @@ body {
     text-transform: uppercase;
     font-size: 0.65rem;
     letter-spacing: 0.03em;
+    white-space: nowrap;
+}
+
+/* Date group header (first row) */
+.mpc-table thead tr:first-child th:not([rowspan]) {
+    background-color: rgba(37, 99, 235, 0.3);
+    border-right: 2px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.6rem 0.5rem;
+    text-align: center;
+}
+
+/* Hour group header (second row) */
+.mpc-table thead tr:nth-child(2) th {
+    background-color: rgba(51, 65, 85, 0.8);
+    border-right: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 0.5rem 0.5rem;
+    text-align: center;
+}
+
+/* Minute header (third row) */
+.mpc-table thead tr:nth-child(3) th {
+    background-color: rgba(51, 65, 85, 0.6);
+    border-right: 1px solid rgba(51, 65, 85, 0.3);
+    padding: 0.4rem 0.3rem;
+    font-size: 0.65rem;
+    font-weight: 500;
+}
+
+/* Metric column styling - make it sticky */
+.mpc-table tbody th:first-child,
+.mpc-table thead th[rowspan] {
+    min-width: 120px;
+    text-align: left;
+    position: sticky;
+    left: 0;
+    z-index: 10;
+    background-color: rgba(30, 41, 59, 0.95);
+    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
 }
 
-.mpc-table th:first-child,
-.mpc-table td:first-child {
-    width: 120px;
+/* Data columns - center align */
+.mpc-table tbody td {
+    text-align: center;
+    padding: 0.4rem 0.3rem;
 }
 
-.mpc-table th:not(:first-child),
-.mpc-table td:not(:first-child) {
-    width: 30px;
+/* Header columns alignment */
+.mpc-table thead th {
     text-align: center;
 }
 
 .mpc-table td {
-    padding: 0.4rem 0.5rem;
     border-bottom: 1px solid var(--color-border);
     color: var(--color-text);
 }
@@ -463,15 +532,20 @@ body {
     border-bottom: none;
 }
 
-/* Forecast data header styling */
-.mpc-table thead tr:first-child th {
+/* Metric column styling */
+.mpc-table thead th[rowspan] {
+    background-color: rgba(37, 99, 235, 0.2);
     vertical-align: middle;
+    border-right: 2px solid var(--color-border);
+    font-size: 0.75rem;
+    text-align: left !important;
 }
 
-.mpc-table thead tr:nth-child(2) th {
-    padding-top: 0.3rem;
-    padding-bottom: 0.4rem;
-    font-size: 0.6rem;
+/* Additional styling for sticky column in body */
+.mpc-table tbody th:first-child {
+    background-color: rgba(30, 41, 59, 0.95);
+    text-align: left !important;
+    border-right: 2px solid var(--color-border);
 }
 
 .action-charge,