From a6d91eec4b69b0237740bc26543b8374653a7731 Mon Sep 17 00:00:00 2001
From: Ash <ash@ogle.fyi>
Date: Wed, 22 Apr 2026 16:12:40 +0000
Subject: [PATCH] fix sidebar: both diagrams visible, add arrow key scrolling
 for remote

---
 workout/2026-04-22.html | 37 +++++++++++++++++++++----------------
 workout/template.html   | 37 +++++++++++++++++++++----------------
 2 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/workout/2026-04-22.html b/workout/2026-04-22.html
index d4b4afa..26e001a 100644
--- a/workout/2026-04-22.html
+++ b/workout/2026-04-22.html
@@ -95,28 +95,24 @@
 
     /* Anatomy sidebar */
     .anatomy-column {
-      width: 380px;
+      width: 360px;
       flex-shrink: 0;
       display: flex;
       flex-direction: column;
+      overflow-y: auto;
     }
     .anatomy-section {
       background: rgba(255,255,255,0.04);
       border: 1px solid rgba(255,255,255,0.08);
       border-radius: 10px;
       padding: 12px;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
     }
-    .anatomy-header { margin-bottom: 10px; flex-shrink: 0; }
+    .anatomy-header { margin-bottom: 10px; }
     .anatomy-title { font-size: 0.85rem; color: #f97316; font-weight: 600; }
     .anatomy-diagrams {
-      flex: 1;
       display: flex;
       flex-direction: column;
       gap: 10px;
-      overflow: hidden;
     }
     .diagram-container {
       background: #ffffff;
@@ -125,18 +121,13 @@
       text-align: center;
       border: 2px solid transparent;
       transition: all 0.3s ease;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
     }
-    .diagram-container h3 { font-size: 0.7rem; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
+    .diagram-container h3 { font-size: 0.7rem; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
     .diagram-container img {
-      flex: 1;
       width: auto;
       max-width: 100%;
       height: auto;
-      max-height: 100%;
+      max-height: 35vh;
       object-fit: contain;
       display: block;
       margin: 0 auto;
@@ -162,7 +153,7 @@
       .exercise-name { font-size: 1.1rem; }
       .reps, .weight { font-size: 0.95rem; }
       .muscle-tag { font-size: 0.75rem; padding: 3px 10px; }
-      .anatomy-column { width: 420px; }
+      .anatomy-column { width: 400px; }
     }
 
     @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@@ -180,7 +171,7 @@
 
     <div class="main">
       <!-- WORKOUT COLUMN -->
-      <div class="workout-column">
+      <div class="workout-column" id="workoutColumn">
         <!-- Main workout table -->
         <div class="section">
           <h2>Main Workout</h2>
@@ -348,6 +339,20 @@
   <div class="wake-locked" id="wakeLockStatus">Screen locked for workout</div>
 
   <script>
+    // Remote control: arrow keys scroll workout
+    const workoutCol = document.getElementById('workoutColumn');
+    const SCROLL_AMOUNT = 120;
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowDown' || e.key === 'Down') {
+        e.preventDefault();
+        workoutCol.scrollBy({ top: SCROLL_AMOUNT, behavior: 'smooth' });
+      } else if (e.key === 'ArrowUp' || e.key === 'Up') {
+        e.preventDefault();
+        workoutCol.scrollBy({ top: -SCROLL_AMOUNT, behavior: 'smooth' });
+      }
+    });
+
     // Wake Lock
     let wakeLock = null;
     async function requestWakeLock() {
diff --git a/workout/template.html b/workout/template.html
index d0c58e9..0fa69ce 100644
--- a/workout/template.html
+++ b/workout/template.html
@@ -96,28 +96,24 @@
 
     /* Anatomy sidebar */
     .anatomy-column {
-      width: 380px;
+      width: 360px;
       flex-shrink: 0;
       display: flex;
       flex-direction: column;
+      overflow-y: auto;
     }
     .anatomy-section {
       background: rgba(255,255,255,0.04);
       border: 1px solid rgba(255,255,255,0.08);
       border-radius: 10px;
       padding: 12px;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
     }
-    .anatomy-header { margin-bottom: 10px; flex-shrink: 0; }
+    .anatomy-header { margin-bottom: 10px; }
     .anatomy-title { font-size: 0.85rem; color: #f97316; font-weight: 600; }
     .anatomy-diagrams {
-      flex: 1;
       display: flex;
       flex-direction: column;
       gap: 10px;
-      overflow: hidden;
     }
     .diagram-container {
       background: #ffffff;
@@ -126,18 +122,13 @@
       text-align: center;
       border: 2px solid transparent;
       transition: all 0.3s ease;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
     }
-    .diagram-container h3 { font-size: 0.7rem; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
+    .diagram-container h3 { font-size: 0.7rem; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
     .diagram-container img {
-      flex: 1;
       width: auto;
       max-width: 100%;
       height: auto;
-      max-height: 100%;
+      max-height: 35vh;
       object-fit: contain;
       display: block;
       margin: 0 auto;
@@ -163,7 +154,7 @@
       .exercise-name { font-size: 1.1rem; }
       .reps, .weight { font-size: 0.95rem; }
       .muscle-tag { font-size: 0.75rem; padding: 3px 10px; }
-      .anatomy-column { width: 420px; }
+      .anatomy-column { width: 400px; }
     }
 
     @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@@ -181,7 +172,7 @@
 
     <div class="main">
       <!-- WORKOUT COLUMN -->
-      <div class="workout-column">
+      <div class="workout-column" id="workoutColumn">
         <!-- Main workout table -->
         <div class="section">
           <h2>Main Workout</h2>
@@ -223,6 +214,20 @@
   <div class="wake-locked" id="wakeLockStatus">Screen locked for workout</div>
 
   <script>
+    // Remote control: arrow keys scroll workout
+    const workoutCol = document.getElementById('workoutColumn');
+    const SCROLL_AMOUNT = 120;
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowDown' || e.key === 'Down') {
+        e.preventDefault();
+        workoutCol.scrollBy({ top: SCROLL_AMOUNT, behavior: 'smooth' });
+      } else if (e.key === 'ArrowUp' || e.key === 'Up') {
+        e.preventDefault();
+        workoutCol.scrollBy({ top: -SCROLL_AMOUNT, behavior: 'smooth' });
+      }
+    });
+
     // Wake Lock
     let wakeLock = null;
     async function requestWakeLock() {