Merge pull request #4 from Devn913/copilot/improve-ui-interaction

UI: fix scroll-on-click, move execute query to top of SQL panel, 70/25 split layout

Author: Devn913

css/style.css

@@ -10,8 +10,10 @@
   --bg-elevated:  #21262d;
   --bg-border:    #30363d;
 
-  /* Board size: at least 50 % of viewport width, capped at 760 px */
-  --board-sz: clamp(320px, 50vw, 760px);
+  --chess-panel-padding: 4rem; /* total horizontal padding within chess panel (2 × 1rem + margins) */
+
+  /* Board size: fills the 70 % chess panel minus padding, capped at 760 px */
+  --board-sz: clamp(320px, calc(70vw - var(--chess-panel-padding) * 2), 760px);
 
   --text-primary:   #e6edf3;
   --text-secondary: #8b949e;
@@ -161,9 +163,19 @@ a      { color: var(--accent-blue); }
   align-items: center;
   padding: 1rem;
   gap: .6rem;
-  flex-shrink: 0;
+  flex: 0 0 70%;
+  width: 70%;
   min-width: 0;
   overflow-y: auto;
+  justify-content: center;
+}
+
+/* When SQL panel is hidden, chess panel fills the available space */
+/* .sql-hidden is set by JS as a fallback for browsers without :has() support */
+.chess-panel.sql-hidden,
+.chess-panel:has(~ .sql-panel.hidden-panel) {
+  flex: 1;
+  width: 100%;
 }
 
 /* Player bars */
@@ -389,7 +401,8 @@ a      { color: var(--accent-blue); }
 
 /* ── SQL Panel ──────────────────────────────────────────────── */
 .sql-panel {
-  flex: 1;
+  flex: 0 0 25%;
+  width: 25%;
   display: flex;
   flex-direction: column;
   border-left: 1px solid var(--bg-border);
@@ -399,7 +412,7 @@ a      { color: var(--accent-blue); }
   transition: width .25s ease, flex .25s ease, opacity .2s;
 }
 .sql-panel.hidden-panel {
-  flex: 0;
+  flex: 0 0 0;
   width: 0;
   opacity: 0;
   pointer-events: none;
@@ -829,7 +842,15 @@ input:checked + .slider::before { transform: translateX(18px); }
 @media (max-width: 900px) {
   .app-main { flex-direction: column; }
 
+  .chess-panel {
+    flex: none;
+    width: 100%;
+    justify-content: flex-start;
+  }
+
   .sql-panel {
+    flex: none;
+    width: 100%;
     border-left: none;
     border-top: 1px solid var(--bg-border);
     max-height: 40vh;

index.html

@@ -90,13 +90,6 @@ <h2 class="sql-title">
           <button type="button" id="btnCopySQL" class="btn btn-xs">Copy All</button>
         </div>
       </div>
-      <div class="sql-content" id="sqlContent">
-        <div class="sql-placeholder" id="sqlPlaceholder">
-          <span class="placeholder-icon">⬡</span>
-          <p>SQL queries will appear here as you play.</p>
-          <p class="placeholder-hint">Each chess move is translated into<br>real SQL statements in real time.</p>
-        </div>
-      </div>
 
       <!-- ── SQL Move Input ──────────────────────────────────── -->
       <div class="sql-input-section" id="sqlInputSection">
@@ -117,6 +110,14 @@ <h2 class="sql-title">
           <button type="button" id="btnRunSQL" class="btn btn-primary btn-sm">▶ Run</button>
         </div>
       </div>
+
+      <div class="sql-content" id="sqlContent">
+        <div class="sql-placeholder" id="sqlPlaceholder">
+          <span class="placeholder-icon">⬡</span>
+          <p>SQL queries will appear here as you play.</p>
+          <p class="placeholder-hint">Each chess move is translated into<br>real SQL statements in real time.</p>
+        </div>
+      </div>
     </section>
 
   </main>

js/app.js

@@ -292,7 +292,7 @@ function fillSQLInputTemplate(sqName, piece) {
   state.sqlInputHasTemplate = true;
   // Place cursor on the ??? so the user can immediately type the destination
   const idx = input.value.indexOf('???');
-  input.focus();
+  input.focus({ preventScroll: true });
   input.setSelectionRange(idx, idx + 3);
   clearSQLRunError();
 }
@@ -876,15 +876,18 @@ function startGame(whiteName, blackName, showSQL, existingPGN) {
   clearSQLRunError();
 
   // SQL panel visibility
-  const sqlPanel = document.getElementById('sqlPanel');
-  const lblEl    = document.getElementById('sqlToggleLabel');
-  const iconEl   = document.getElementById('sqlToggleIcon');
+  const sqlPanel   = document.getElementById('sqlPanel');
+  const chessPanel = document.getElementById('chessPanel');
+  const lblEl      = document.getElementById('sqlToggleLabel');
+  const iconEl     = document.getElementById('sqlToggleIcon');
   if (state.showSQL) {
     sqlPanel.classList.remove('hidden-panel');
+    chessPanel.classList.remove('sql-hidden');
     lblEl.textContent  = 'Hide SQL';
     iconEl.textContent = '◧';
   } else {
     sqlPanel.classList.add('hidden-panel');
+    chessPanel.classList.add('sql-hidden');
     lblEl.textContent  = 'Show SQL';
     iconEl.textContent = '□';
   }
@@ -1003,15 +1006,18 @@ function init() {
   // Toggle SQL Panel
   document.getElementById('btnToggleSQL').addEventListener('click', () => {
     state.showSQL = !state.showSQL;
-    const sqlPanel = document.getElementById('sqlPanel');
-    const lblEl    = document.getElementById('sqlToggleLabel');
-    const iconEl   = document.getElementById('sqlToggleIcon');
+    const sqlPanel   = document.getElementById('sqlPanel');
+    const chessPanel = document.getElementById('chessPanel');
+    const lblEl      = document.getElementById('sqlToggleLabel');
+    const iconEl     = document.getElementById('sqlToggleIcon');
     if (state.showSQL) {
       sqlPanel.classList.remove('hidden-panel');
+      chessPanel.classList.remove('sql-hidden');
       lblEl.textContent  = 'Hide SQL';
       iconEl.textContent = '◧';
     } else {
       sqlPanel.classList.add('hidden-panel');
+      chessPanel.classList.add('sql-hidden');
       lblEl.textContent  = 'Show SQL';
       iconEl.textContent = '□';
     }