Merge branch 'main' into copilot/feat-add-pdf-powerpoint-export

Author: DevSecNinja

.github/workflows/e2e.yml

@@ -1,7 +1,9 @@
 ---
 name: E2E
 
-# Runs the Playwright end-to-end + mobile/responsive suite across Chromium,
+# Runs the Playwright end-to-end + mobile/responsive suite. To keep PR feedback
+# fast, pull requests run only the Chromium engine (desktop + emulated mobile);
+# pushes to main and manual runs exercise the full matrix across Chromium,
 # Firefox and WebKit (desktop) plus emulated mobile devices. Unit/component
 # tests (Vitest) run in the Pages workflow; this workflow focuses on real
 # browser flows. See playwright.config.js for projects and the dev web server.
@@ -49,20 +51,66 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Determine browser scope
+        id: scope
+        # PRs validate against the Chromium engine only (desktop + mobile-chrome)
+        # for fast feedback; main / manual runs cover the full browser matrix.
+        run: |-
+          if [ "${{ github.event_name }}" = "pull_request" ]; then
+            {
+              echo "browsers=chromium"
+              echo "projects=--project=chromium --project=mobile-chrome"
+              echo "label=chromium"
+            } >> "$GITHUB_OUTPUT"
+          else
+            {
+              echo "browsers=chromium firefox webkit"
+              echo "projects="
+              echo "label=all"
+            } >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Resolve Playwright version
+        id: playwright-version
+        # Key the cache on the resolved Playwright version (stable across
+        # lockfile churn) rather than hashFiles(package-lock.json).
+        run: |-
+          version=$(node -p "require('./package-lock.json').packages['node_modules/@playwright/test'].version")
+          echo "version=$version" >> "$GITHUB_OUTPUT"
+
       - name: Cache Playwright browsers
         id: playwright-cache
         uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.cache/ms-playwright
-          key: playwright-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
-          restore-keys: |-
-            playwright-${{ runner.os }}-
+          key: >-
+            playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}-${{
+            steps.scope.outputs.label }}
 
       - name: Install Playwright browsers
-        run: npx playwright install --with-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        env:
+          BROWSERS: ${{ steps.scope.outputs.browsers }}
+        run: |-
+          # shellcheck disable=SC2086  # intentional word splitting into args
+          npx playwright install $BROWSERS --with-deps
+
+      - name: Install Playwright system dependencies
+        # Browser binaries are cached, but apt system libraries are not persisted
+        # across ephemeral runners, so refresh them on a cache hit.
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+        env:
+          BROWSERS: ${{ steps.scope.outputs.browsers }}
+        run: |-
+          # shellcheck disable=SC2086  # intentional word splitting into args
+          npx playwright install-deps $BROWSERS
 
       - name: Run Playwright tests
-        run: npm run test:e2e
+        env:
+          PROJECTS: ${{ steps.scope.outputs.projects }}
+        run: |-
+          # shellcheck disable=SC2086  # intentional word splitting into args
+          npm run test:e2e -- $PROJECTS
 
       - name: Upload Playwright report
         if: ${{ !cancelled() }}

playwright.config.js

@@ -12,7 +12,7 @@ export default defineConfig({
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  workers: process.env.CI ? 2 : undefined,
   reporter: process.env.CI
     ? [['html', { open: 'never' }], ['github'], ['list']]
     : [['html', { open: 'never' }], ['list']],

src/components/MeasureDetailPanel.jsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import { t } from '../i18n/strings.js';
 import {
   localized,
@@ -7,10 +8,26 @@ import {
 } from '../data/grip.js';
 import LicenseBadge from './LicenseBadge.jsx';
 
+// Breakpoint at which the layout switches to a single column (matches CSS).
+const MOBILE_BREAKPOINT = 1080;
+
 export default function MeasureDetailPanel({ measure, lang, onClose }) {
+  const panelRef = useRef(null);
+
+  useEffect(() => {
+    if (
+      measure &&
+      panelRef.current &&
+      typeof panelRef.current.scrollIntoView === 'function' &&
+      window.innerWidth <= MOBILE_BREAKPOINT
+    ) {
+      panelRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [measure]);
+
   if (!measure) {
     return (
-      <aside className="detail detail--empty" aria-live="polite">
+      <aside ref={panelRef} className="detail detail--empty" aria-live="polite">
         <h2 className="detail__empty-title">{t(lang, 'selectMeasure')}</h2>
         <p className="detail__empty-hint">{t(lang, 'selectMeasureHint')}</p>
       </aside>
@@ -26,7 +43,7 @@ export default function MeasureDetailPanel({ measure, lang, onClose }) {
     measure.type === 'T' ? t(lang, 'technical') : t(lang, 'organisational');
 
   return (
-    <aside className="detail" aria-live="polite">
+    <aside ref={panelRef} className="detail" aria-live="polite">
       <header className="detail__head">
         <div className="detail__head-meta">
           <span className="detail__code">{measure.code}</span>