From 055b9f4409a1bf51c314cc786776e8c4a0d75961 Mon Sep 17 00:00:00 2001
From: SowinskiBraeden <braeden@sowinski.dev>
Date: Sat, 21 Mar 2026 01:18:26 -0700
Subject: [PATCH] session summary layout upgrade

---
 static/css/style.css          |  97 +++++++-----------
 templates/session_detail.html | 184 +++++++++++++++++++++++-----------
 2 files changed, 165 insertions(+), 116 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index f973944..b4b6f3c 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -755,74 +755,35 @@ 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-full {
+    display: block;
 }
 
-.results-panel,
-.chart-panel {
+.table-scroll-open {
+    overflow-x: auto;
+    overflow-y: visible;
+    max-height: none;
+    padding-right: 0;
+}
+
+.chart-row {
+    align-items: stretch;
+}
+
+.chart-panel-compact,
+.session-insights-panel {
     display: flex;
     flex-direction: column;
-    height: 430px;
-    min-height: 430px;
-    max-height: 430px;
 }
 
-.results-panel .table-scroll {
+.chart-panel-compact .chart-frame-compact {
     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;
+    min-height: 220px;
     height: auto;
 }
 
@@ -838,8 +799,8 @@ td a:hover {
 
 .session-results-table th:last-child,
 .session-results-table td:last-child {
-    min-width: 15rem;
-    width: 18rem;
+    min-width: 18rem;
+    width: 22rem;
     white-space: normal;
 }
 
@@ -851,6 +812,24 @@ td a:hover {
     backdrop-filter: blur(6px);
 }
 
+.detail-grid {
+    display: grid;
+    gap: 0.9rem;
+}
+
+.detail-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.8rem 0;
+    border-bottom: 1px solid var(--line);
+}
+
+.detail-row:last-child {
+    border-bottom: 0;
+}
+
 .button-row {
     display: flex;
     gap: 0.75rem;
diff --git a/templates/session_detail.html b/templates/session_detail.html
index 5fae13f..a87ca70 100644
--- a/templates/session_detail.html
+++ b/templates/session_detail.html
@@ -39,75 +39,145 @@
     </article>
 </section>
 
-<section class="grid two-col session-layout">
-    <div class="panel results-panel">
-        <div class="panel-header">
-            <div>
-                <p class="eyebrow">Results</p>
-                <h2>Player totals</h2>
-            </div>
-        </div>
-        <div class="table-wrap table-scroll">
-            <table class="data-table session-results-table">
-                <thead>
-                    <tr>
-                        <th>Player</th>
-                        <th>Buy-in</th>
-                        <th>Cash-out</th>
-                        <th>Paid</th>
-                        <th>Remaining</th>
-                        <th>Status</th>
-                        <th>Net</th>
-                        <th>Notes</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for entry in session.entries %}
-                    <tr>
-                        <td><a href="{{ url_for('player_detail', player_name=entry.player_name) }}">{{ entry.player_name }}</a></td>
-                        <td>{{ entry.buy_in_cents | money }}</td>
-                        <td>{{ entry.cash_out_cents | money }}</td>
-                        <td>{{ entry.paid_cents | money }}</td>
-                        <td class="{{ 'negative' if entry.payout_remaining_cents > 0 else 'positive' }}">
-                            {{ entry.payout_remaining_cents | money }}
-                        </td>
-                        <td>
-                            <span class="status-badge status-{{ entry.payout_status }}">
-                                {{ entry.payout_status }}
-                            </span>
-                        </td>
-                        <td class="{{ 'positive' if entry.net_cents > 0 else 'negative' if entry.net_cents < 0 else '' }}">
-                            {{ entry.net_cents | money }}
-                        </td>
-                        <td>
-                            {% if entry.notes %}
-                                <ul class="note-list">
-                                    {% for note in entry.notes %}
-                                        <li>{{ note }}</li>
-                                    {% endfor %}
-                                </ul>
-                            {% else %}
-                                —
-                            {% endif %}
-                        </td>
-                    </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
+<section class="panel results-panel results-panel-full">
+    <div class="panel-header">
+        <div>
+            <p class="eyebrow">Results</p>
+            <h2>Player totals</h2>
         </div>
     </div>
 
-    <div class="panel chart-panel">
+    <div class="table-scroll table-scroll-open">
+        <table class="data-table session-results-table">
+            <thead>
+                <tr>
+                    <th>Player</th>
+                    <th>Buy-in</th>
+                    <th>Cash-out</th>
+                    <th>Paid</th>
+                    <th>Remaining</th>
+                    <th>Status</th>
+                    <th>Net</th>
+                    <th>Notes</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for entry in session.entries %}
+                <tr>
+                    <td>
+                        <a href="{{ url_for('player_detail', player_name=entry.player_name) }}">
+                            {{ entry.player_name }}
+                        </a>
+                    </td>
+                    <td>{{ entry.buy_in_cents | money }}</td>
+                    <td>{{ entry.cash_out_cents | money }}</td>
+                    <td>{{ entry.paid_cents | money }}</td>
+                    <td class="{{ 'negative' if entry.payout_remaining_cents > 0 else 'positive' }}">
+                        {{ entry.payout_remaining_cents | money }}
+                    </td>
+                    <td>
+                        <span class="status-badge status-{{ entry.payout_status }}">
+                            {{ entry.payout_status }}
+                        </span>
+                    </td>
+                    <td class="{{ 'positive' if entry.net_cents > 0 else 'negative' if entry.net_cents < 0 else '' }}">
+                        {{ entry.net_cents | money }}
+                    </td>
+                    <td>
+                        {% if entry.notes %}
+                            <ul class="note-list">
+                                {% for note in entry.notes %}
+                                    <li>{{ note }}</li>
+                                {% endfor %}
+                            </ul>
+                        {% else %}
+                            —
+                        {% endif %}
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</section>
+
+<section class="grid two-col chart-row">
+    <div class="panel chart-panel chart-panel-compact">
         <div class="panel-header">
             <div>
                 <p class="eyebrow">Breakdown</p>
                 <h2>Net by player</h2>
             </div>
         </div>
-        <div class="chart-frame">
+        <div class="chart-frame chart-frame-compact">
             <canvas id="sessionBreakdownChart"></canvas>
         </div>
     </div>
+
+    <div class="panel session-insights-panel">
+        <div class="panel-header">
+            <div>
+                <p class="eyebrow">Quick read</p>
+                <h2>Session snapshot</h2>
+            </div>
+        </div>
+
+        {% set winners = session.entries | selectattr('net_cents', 'gt', 0) | list %}
+        {% set losers = session.entries | selectattr('net_cents', 'lt', 0) | list %}
+
+        <div class="detail-grid">
+            <div class="detail-row">
+                <span>Players</span>
+                <strong>{{ session.entries|length }}</strong>
+            </div>
+            <div class="detail-row">
+                <span>Biggest winner</span>
+                <strong>
+                    {% if winners %}
+                        {{ winners | sort(attribute='net_cents', reverse=True) | first | attr('player_name') }}
+                    {% else %}
+                        —
+                    {% endif %}
+                </strong>
+            </div>
+            <div class="detail-row">
+                <span>Best result</span>
+                <strong class="positive">
+                    {% if winners %}
+                        {{ (winners | sort(attribute='net_cents', reverse=True) | first).net_cents | money }}
+                    {% else %}
+                        $0.00
+                    {% endif %}
+                </strong>
+            </div>
+            <div class="detail-row">
+                <span>Biggest loser</span>
+                <strong>
+                    {% if losers %}
+                        {{ losers | sort(attribute='net_cents') | first | attr('player_name') }}
+                    {% else %}
+                        —
+                    {% endif %}
+                </strong>
+            </div>
+            <div class="detail-row">
+                <span>Worst result</span>
+                <strong class="negative">
+                    {% if losers %}
+                        {{ (losers | sort(attribute='net_cents') | first).net_cents | money }}
+                    {% else %}
+                        $0.00
+                    {% endif %}
+                </strong>
+            </div>
+            <div class="detail-row">
+                <span>Unpaid total</span>
+                <strong class="{{ 'negative' if session.total_remaining_cents > 0 else 'positive' }}">
+                    {{ session.total_remaining_cents | money }}
+                </strong>
+            </div>
+        </div>
+    </div>
 </section>
 
 <section class="panel">