redesign right SQL panel: responsive layout, larger query editor, scroll isolation, Playwright tests

Agent-Logs-Url: https://github.com/Devn913/SQL_Chess/sessions/eb41956a-9637-482d-a220-c795c0d325b3

Co-authored-by: Devn913 <56478595+Devn913@users.noreply.github.com>

Author: Copilot

.github/workflows/deploy.yml

@@ -29,10 +29,40 @@ jobs:
       - name: Validate HTML
         run: html-validate index.html
 
+  # ── Playwright responsive / layout tests ─────────────────────
+  test:
+    name: Responsive Layout Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+
+      - name: Run Playwright tests
+        run: npx playwright test --reporter=list
+
+      - name: Upload Playwright report on failure
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
   # ── Deploy (only on push to main) ────────────────────────────
   deploy:
     name: Deploy to GitHub Pages
-    needs: validate
+    needs: [validate, test]
     if: github.event_name == 'push' && github.ref == 'refs/heads/main'
     runs-on: ubuntu-latest
 
@@ -61,3 +91,4 @@ jobs:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
+

css/style.css

@@ -12,10 +12,10 @@
 
   --chess-panel-padding: 4rem; /* total horizontal padding within chess panel (2 × 1rem + margins) */
 
-  /* Board size: fills the 70 % chess panel minus padding, capped at 720 px.
+  /* Board size: fills the 68 % chess panel minus padding, capped at 720 px.
      Also constrained by viewport height (subtracting ~280px for header 56px +
      player bars ~80px + controls ~40px + move history ~100px + gaps ~4px). */
-  --board-sz: clamp(300px, min(calc(70vw - var(--chess-panel-padding) * 2), calc(100vh - 280px)), 720px);
+  --board-sz: clamp(300px, min(calc(68vw - var(--chess-panel-padding) * 2), calc(100vh - 280px)), 720px);
 
   --text-primary:   #e6edf3;
   --text-secondary: #8b949e;
@@ -166,8 +166,8 @@ a      { color: var(--accent-blue); }
   align-items: center;
   padding: 1rem;
   gap: .6rem;
-  flex: 0 0 70%;
-  width: 70%;
+  flex: 0 0 68%;
+  width: 68%;
   min-width: 0;
   overflow-y: auto;
   scrollbar-width: thin;
@@ -405,22 +405,25 @@ a      { color: var(--accent-blue); }
 
 /* ── SQL Panel ──────────────────────────────────────────────── */
 .sql-panel {
-  flex: 0 0 30%;
-  width: 30%;
+  flex: 0 0 32%;
+  width: 32%;
+  min-width: 300px;
   display: flex;
   flex-direction: column;
   border-left: 1px solid var(--bg-border);
   background: var(--sql-bg);
   overflow: hidden;
-  min-width: 0;
   transition: width .25s ease, flex .25s ease, opacity .2s;
 }
 .sql-panel.hidden-panel {
   flex: 0 0 0;
   width: 0;
+  /* Override the base min-width (300 px) so the panel collapses fully */
+  min-width: 0;
   opacity: 0;
   pointer-events: none;
   border-left: none;
+  overflow: hidden;
 }
 
 .sql-panel-header {
@@ -459,13 +462,16 @@ a      { color: var(--accent-blue); }
 /* SQL content area */
 .sql-content {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
+  overflow-x: hidden;
   padding: .75rem 1rem;
   display: flex;
   flex-direction: column;
   gap: .75rem;
   scroll-behavior: smooth;
   scrollbar-width: thin;
+  scrollbar-color: var(--bg-border) transparent;
 }
 
 .sql-placeholder {
@@ -782,7 +788,9 @@ input:checked + .slider::before { transform: translateX(18px); }
   font-size: .78rem;
   line-height: 1.6;
   padding: .6rem .75rem;
-  resize: none;
+  resize: vertical;
+  min-height: 7.5rem;
+  max-height: 20rem;
   outline: none;
   transition: background .15s;
 }
@@ -845,41 +853,164 @@ input:checked + .slider::before { transform: translateX(18px); }
   .sql-input-section { display: flex; }
 }
 
+/* ── Responsive: Tablet (≤ 1024 px) ────────────────────────── */
+@media (max-width: 1024px) {
+  .sql-panel {
+    flex: 0 0 36%;
+    width: 36%;
+    min-width: 260px;
+  }
+  .chess-panel {
+    flex: 0 0 64%;
+    width: 64%;
+  }
+  :root {
+    --board-sz: clamp(280px,
+      min(calc(64vw - var(--chess-panel-padding) * 2), calc(100vh - 280px)),
+      640px);
+  }
+}
+
+/* ── Responsive: Mobile landscape / narrow (≤ 900 px) ──────── */
 @media (max-width: 900px) {
-  .app-main { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
+  .app-main {
+    flex-direction: column;
+    overflow: hidden;
+  }
 
   .chess-panel {
-    flex: none;
+    flex: 0 0 auto;
     width: 100%;
+    max-height: 58vh;
     min-height: auto;
-    overflow-y: visible;
+    overflow-y: auto;
+    scrollbar-width: thin;
   }
 
   .sql-panel {
-    flex: none;
+    flex: 1 1 auto;
     width: 100%;
+    min-width: 0;
+    min-height: 40vh;
     border-left: none;
     border-top: 1px solid var(--bg-border);
-    height: 45vh;
-    min-height: 260px;
+    overflow: hidden;
   }
   .sql-panel.hidden-panel {
-    height: 0;
+    flex: 0 0 0;
     min-height: 0;
+    height: 0;
     border-top: none;
+    overflow: hidden;
+  }
+
+  .sql-move-input {
+    min-height: 5.5rem;
   }
 
   /* Mobile: limit by both viewport width and height to handle short screens */
   :root { --board-sz: min(90vw, 440px, calc(55vh)); }
 }
 
+/* ── Responsive: Mobile portrait (≤ 600 px) ────────────────── */
+@media (max-width: 600px) {
+  .chess-panel {
+    max-height: 54vh;
+    padding: .6rem;
+  }
+
+  .sql-panel {
+    min-height: 44vh;
+  }
+
+  .sql-move-input {
+    min-height: 5rem;
+    font-size: .75rem;
+  }
+
+  .sql-panel-header {
+    padding: .4rem .75rem;
+  }
+
+  .sql-input-bar {
+    padding: .45rem .75rem;
+  }
+
+  :root { --board-sz: min(90vw, 380px, calc(50vh)); }
+}
+
+/* ── Responsive: Small phone (≤ 480 px) ────────────────────── */
 @media (max-width: 480px) {
   .app-header { padding: 0 .75rem; }
   .header-logo .logo-text { display: none; }
-  .chess-panel { padding: .5rem; }
+  .chess-panel { padding: .5rem; gap: .4rem; max-height: 52vh; }
   .header-controls { gap: .3rem; }
 
-  :root { --board-sz: min(92vw, 360px); }
+  .sql-panel { min-height: 46vh; }
+
+  .sql-move-input { min-height: 4.5rem; }
+
+  :root { --board-sz: min(92vw, 340px, calc(48vh)); }
 
   #btnToggleSQL #sqlToggleLabel { display: none; }
 }
+
+/* ── Responsive: Wide screens (≥ 1440 px) ──────────────────── */
+@media (min-width: 1440px) {
+  .sql-panel {
+    flex: 0 0 28%;
+    width: 28%;
+    min-width: 340px;
+  }
+  .chess-panel {
+    flex: 0 0 72%;
+    width: 72%;
+  }
+  :root {
+    --board-sz: clamp(400px,
+      min(calc(72vw - var(--chess-panel-padding) * 2), calc(100vh - 280px)),
+      760px);
+  }
+}
+
+/* ── Responsive: Very wide screens (≥ 1920 px) ─────────────── */
+@media (min-width: 1920px) {
+  .sql-panel {
+    flex: 0 0 26%;
+    width: 26%;
+    min-width: 400px;
+  }
+  .chess-panel {
+    flex: 0 0 74%;
+    width: 74%;
+  }
+  .sql-move-input {
+    min-height: 9rem;
+  }
+}
+
+/* ── Responsive: Short landscape (height < 500 px) ─────────── */
+/* e.g. phones in landscape orientation */
+@media (max-height: 500px) {
+  .chess-panel {
+    max-height: 50vh;
+  }
+  .sql-panel {
+    min-height: 48vh;
+  }
+  .sql-move-input {
+    min-height: 3rem;
+    max-height: 6rem;
+  }
+  .sql-input-bar {
+    min-height: 36px;
+    padding: .25rem .75rem;
+  }
+  .sql-input-actions {
+    padding: .25rem .5rem;
+  }
+  .sql-panel-header {
+    padding: .35rem .75rem;
+  }
+}
+

index.html

@@ -101,7 +101,7 @@ <h2 class="sql-title">
           id="sqlMoveInput"
           class="sql-move-input"
           spellcheck="false"
-          rows="3"
+          rows="6"
           placeholder="UPDATE chess_piece&#10;SET    position = 'e4'&#10;WHERE  position = 'e2';&#10;&#10;-- or shorthand:  e2 e4"></textarea>
         <div class="sql-input-actions">
           <span class="sql-run-error hidden" id="sqlRunError"></span>

package.json

@@ -1,5 +1,12 @@
 {
   "dependencies": {
     "chess.js": "^0.10.3"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.59.1"
+  },
+  "scripts": {
+    "test": "playwright test",
+    "test:report": "playwright show-report"
   }
 }

playwright.config.js

@@ -0,0 +1,61 @@
+// @ts-check
+const { defineConfig, devices } = require('@playwright/test');
+const path = require('path');
+
+module.exports = defineConfig({
+  testDir: './tests',
+  timeout: 30_000,
+  retries: 0,
+  reporter: [['list'], ['html', { open: 'never' }]],
+
+  use: {
+    /* Serve index.html directly via file:// so no server is needed */
+    baseURL: 'file://' + path.resolve(__dirname, 'index.html'),
+    headless: true,
+    screenshot: 'only-on-failure',
+    video: 'off',
+  },
+
+  projects: [
+    /* Desktop sizes */
+    {
+      name: 'desktop-1920x1080',
+      use: { ...devices['Desktop Chrome'], viewport: { width: 1920, height: 1080 } },
+    },
+    {
+      name: 'desktop-1440x900',
+      use: { ...devices['Desktop Chrome'], viewport: { width: 1440, height: 900 } },
+    },
+    {
+      name: 'desktop-1280x800',
+      use: { ...devices['Desktop Chrome'], viewport: { width: 1280, height: 800 } },
+    },
+    /* Tablet sizes */
+    {
+      name: 'tablet-1024x768',
+      use: { ...devices['Desktop Chrome'], viewport: { width: 1024, height: 768 } },
+    },
+    {
+      name: 'tablet-portrait-768x1024',
+      use: { ...devices['Desktop Chrome'], viewport: { width: 768, height: 1024 } },
+    },
+    /* Mobile sizes */
+    {
+      name: 'mobile-portrait-390x844',
+      use: { ...devices['Desktop Chrome'], viewport: { width: 390, height: 844 } },
+    },
+    {
+      name: 'mobile-landscape-844x390',
+      use: { ...devices['Desktop Chrome'], viewport: { width: 844, height: 390 } },
+    },
+    {
+      name: 'mobile-small-360x640',
+      use: { ...devices['Desktop Chrome'], viewport: { width: 360, height: 640 } },
+    },
+    /* Ultrawide */
+    {
+      name: 'ultrawide-2560x1080',
+      use: { ...devices['Desktop Chrome'], viewport: { width: 2560, height: 1080 } },
+    },
+  ],
+});

test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}