imrpoved session details page

static/css/style.css

@@ -755,11 +755,102 @@ td a:hover {
 }
 
 .leaderboard-layout,
-.session-layout,
 .admin-layout {
     align-items: stretch;
 }
 
+.session-layout {
+    align-items: stretch;
+    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
+}
+
+.results-panel,
+.chart-panel {
+    display: flex;
+    flex-direction: column;
+    height: 430px;
+    min-height: 430px;
+    max-height: 430px;
+}
+
+.results-panel .table-scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-x: auto;
+    overflow-y: auto;
+    padding-right: 0.25rem;
+
+    scrollbar-gutter: stable;
+    scrollbar-width: auto;
+    scrollbar-color: rgba(255, 160, 64, 0.88) rgba(255, 255, 255, 0.08);
+}
+
+.results-panel .table-scroll::-webkit-scrollbar {
+    width: 14px;
+    height: 12px;
+}
+
+.results-panel .table-scroll::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.06);
+    border-radius: 999px;
+}
+
+.results-panel .table-scroll::-webkit-scrollbar-thumb {
+    background: linear-gradient(
+        180deg,
+        rgba(255, 186, 110, 0.95),
+        rgba(255, 136, 48, 0.95)
+    );
+    border-radius: 999px;
+    border: 2px solid rgba(10, 12, 18, 0.9);
+    box-shadow:
+        0 0 0 1px rgba(255, 170, 90, 0.18),
+        0 0 12px rgba(255, 140, 60, 0.18);
+}
+
+.results-panel .table-scroll::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(
+        180deg,
+        rgba(255, 200, 130, 1),
+        rgba(255, 150, 60, 1)
+    );
+}
+
+.results-panel .table-scroll::-webkit-scrollbar-corner {
+    background: rgba(255, 255, 255, 0.04);
+}
+
+.chart-panel .chart-frame {
+    flex: 1;
+    min-height: 0;
+    height: auto;
+}
+
+.session-results-table {
+    min-width: 980px;
+}
+
+.session-results-table th,
+.session-results-table td {
+    vertical-align: top;
+    white-space: nowrap;
+}
+
+.session-results-table th:last-child,
+.session-results-table td:last-child {
+    min-width: 15rem;
+    width: 18rem;
+    white-space: normal;
+}
+
+.session-results-table thead th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: rgba(16, 20, 28, 0.96);
+    backdrop-filter: blur(6px);
+}
+
 .button-row {
     display: flex;
     gap: 0.75rem;
@@ -880,6 +971,19 @@ td a:hover {
     border: 1px solid rgba(203, 213, 225, 0.14);
 }
 
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 5.5rem;
+    padding: 0.35rem 0.65rem;
+    border-radius: 999px;
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
 @media (max-width: 980px) {
     .site-shell {
         width: min(100% - 24px, 100%);