Full-width desktop layout, improved light/dark mode theming across all pages by Copilot · Pull Request #1309 · Hack23/riksdagsmonitor

Copilot · 2026-03-20T09:56:51Z

Inspect current review feedback and reproduce any test/lint issues
Update tests/theme-toggle.test.js to guarantee timer cleanup (afterEach) and remove potential pending timers
Re-run targeted lint/tests for theme-toggle changes
Check CI workflow status/logs for the mentioned quality-check context
Run final code review and security scan, then reply on PR comment with commit hash and screenshot URL

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

github-actions · 2026-03-20T09:57:29Z

🏷️ Automatic Labeling Summary

This PR has been automatically labeled based on the files changed and PR metadata.

Applied Labels: size-xs

Label Categories

🗳️ Content: news, dashboard, visualization, intelligence
💻 Technology: html-css, javascript, workflow, security
📊 Data: cia-data, riksdag-data, data-pipeline, schema
🌍 I18n: i18n, translation, rtl
🔒 ISMS: isms, iso-27001, nist-csf, cis-controls
🏗️ Infrastructure: ci-cd, deployment, performance, monitoring
🔄 Quality: testing, accessibility, documentation, refactor
🤖 AI: agent, skill, agentic-workflow

For more information, see .github/labeler.yml.

github-actions · 2026-03-20T09:57:56Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

github-actions · 2026-03-20T10:03:33Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

…ling - Remove max-width: 1200px constraint from body (use full viewport width) - Update all container elements to max-width: 100% - Improve light theme: better card elevation, background, borders - Improve dark theme: better card hover effects, backdrop blur, footer styling - Dashboard: full-width container, improved metric card hover effects - Cards grid: use auto-fit with 1fr for natural full-width expansion Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

github-actions · 2026-03-20T10:09:14Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

…, consistent hover effects - Restore vertical padding on body (var(--spacing-md)) - Cap cards grid max column width to 480px to prevent ultra-wide cards - Cap value-metrics grid max column width to 420px - Add consistent translateY hover effect to dark theme metric cards Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

github-actions · 2026-03-20T10:15:44Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

… article dark/light mode - Tighten breadcrumb spacing (padding, margin, font-size) - Reduce header bottom margin for better vertical rhythm - Reduce dashboard section margins for tighter layout - Add smooth theme transition for body, header, footer, cards, breadcrumb, nav - Add light mode subtle section backgrounds for visual hierarchy - Add comprehensive news article dark/light mode overrides - Add light mode AI newsroom section and footer overrides - Improve mobile body padding for small screens - Optimize footer padding/margins - Reduce dashboard metrics-grid margin Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

github-actions · 2026-03-20T10:31:09Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

…ard border transition, simplify dark gradients Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

github-actions · 2026-03-20T10:33:52Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

Copilot · 2026-03-20T12:20:32Z

@copilot analyse and improve code quality and test [Quality Checks / typescript-lint (pull_request)](https://github.com/Hack23/riksdagsmonitor/actions/runs/23341947676/job/67897450696?...

Fixed in 33e75a8. The no-useless-assignment error was in tests/theme-toggle.test.js:401 — the second timer = setTimeout(...) in the rapid-toggle test was never read afterward. Removed the unnecessary assignment since the timer ID is only needed for the preceding clearTimeout check, not captured again. All 37 theme-toggle tests pass, 0 lint errors.

github-actions · 2026-03-20T12:21:21Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

Copilot

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 3 comments.

Copilot · 2026-03-20T12:37:28Z

+    it('adds theme-transition class on toggle', () => {
+      buildButton();
+      applyTheme('light', false, storage);
+      const current = document.documentElement.getAttribute('data-theme') || LIGHT;
+      const next    = current === DARK ? LIGHT : DARK;
+      document.documentElement.classList.add('theme-transition');
+      applyTheme(next, undefined, storage);
+      updateButton(next);
+      expect(document.documentElement.classList.contains('theme-transition')).toBe(true);
+    });


This test doesn't verify that the toggle behavior adds the theme-transition class because it adds the class manually (line 358) and never invokes the toggle/click handler. As written, it will pass even if the production code stops adding the class. Suggested fix: start with the class absent, trigger the same path users do (e.g., dispatch a click on the toggle button or call the toggle handler), and then assert that theme-transition is present.

Copilot · 2026-03-20T12:37:28Z

+      setTimeout(function () {
+        document.documentElement.classList.remove('theme-transition');
+      }, 350);
+
+      // After 350ms from second toggle, class should be removed
+      vi.advanceTimersByTime(350);


This test can't fail if the clearTimeout guard is removed from production code: even if the first timer fires at t=350ms and removes the class prematurely, the final assertion still passes because the second timer also removes the class before the final check. Suggested fix: add an assertion at the moment the first timer would have fired (e.g., advance to ~350ms total time and assert the class is still present), then advance to 350ms after the second toggle and assert removal. Also consider assigning the second setTimeout(...) handle to timer so it mirrors the implementation and remains extensible for additional rapid toggles.

Suggested change

setTimeout(function () {

document.documentElement.classList.remove('theme-transition');

}, 350);

// After 350ms from second toggle, class should be removed

vi.advanceTimersByTime(350);

timer = setTimeout(function () {

document.documentElement.classList.remove('theme-transition');

timer = null;

}, 350);

// After 350ms from first toggle (i.e. 250ms after the second), class should still be present

vi.advanceTimersByTime(250);

expect(document.documentElement.classList.contains('theme-transition')).toBe(true);

// After 350ms from second toggle, class should be removed

vi.advanceTimersByTime(100);

Copilot · 2026-03-20T12:37:28Z

  const STORAGE_KEY = 'riksdagsmonitor-theme';
  const DARK  = 'dark';
  const LIGHT = 'light';
+  var _transitionTimer = null;


In this file the surrounding declarations use const, but the new timer uses var. Using let _transitionTimer = null; avoids function-scope hoisting pitfalls and keeps the scoping consistent with modern JS patterns used elsewhere in the file.

Suggested change

var _transitionTimer = null;

let _transitionTimer = null;

pethers · 2026-03-20T12:51:03Z

@copilot apply changes based on the comments in this thread

github-actions · 2026-03-20T12:52:01Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

github-actions · 2026-03-20T12:56:18Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

Copilot · 2026-03-20T12:58:28Z

@copilot apply changes based on the comments in this thread

Implemented in 45ec8fa.

Applied all requested fixes from the review thread:

Updated tests/theme-toggle.test.js so transition tests now exercise toggle-path behavior (not manual class add/remove).
Strengthened rapid-toggle test with an intermediate assertion to catch premature class removal (250ms after second toggle).
Updated public/js/theme-toggle.js to use let _transitionTimer = null.

Validation run:

npx eslint tests/theme-toggle.test.js public/js/theme-toggle.js
npx vitest run tests/theme-toggle.test.js
codeql_checker (0 alerts)

Screenshot (dashboard light mode): https://github.com/user-attachments/assets/7cc6de80-0ca0-464a-8372-9e2be59d997c

Copilot

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 2 comments.

Copilot · 2026-03-20T13:03:26Z

+    it('adds theme-transition class on toggle', () => {
+      buildButton();
+      applyTheme('light', false, storage);
+      const toggle = createToggleHandler();
+
+      expect(document.documentElement.classList.contains('theme-transition')).toBe(false);
+      toggle();
+      expect(document.documentElement.classList.contains('theme-transition')).toBe(true);
+    });


The "adds theme-transition class on toggle" test schedules a real setTimeout (350ms) without using fake timers or clearing it afterward. That leaves a pending timer that can keep the event loop alive and/or mutate documentElement during later tests, causing flakiness/open-handle warnings. Use vi.useFakeTimers() for this test too (and advance/flush timers), or cancel any outstanding transition timer in an afterEach for this describe block.

Copilot · 2026-03-20T13:03:27Z

+    it('removes theme-transition class after timeout', () => {
+      vi.useFakeTimers();
+      buildButton();
+      applyTheme('light', false, storage);
+      const toggle = createToggleHandler();
+
+      toggle();
+      expect(document.documentElement.classList.contains('theme-transition')).toBe(true);
+      vi.advanceTimersByTime(350);
+      expect(document.documentElement.classList.contains('theme-transition')).toBe(false);
+      vi.useRealTimers();
+    });


These tests switch to fake timers and then manually call vi.useRealTimers() at the end. If an assertion throws before that line, the suite can stay in fake-timer mode and cascade failures into later tests. Prefer moving timer restore/cleanup into an afterEach (and consider vi.clearAllTimers()/vi.runOnlyPendingTimers()) within this describe block to guarantee cleanup even on failure.

pethers · 2026-03-20T13:08:43Z

@copilot apply changes based on the comments in this thread

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

github-actions · 2026-03-20T13:13:01Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

Copilot · 2026-03-20T13:15:22Z

@copilot apply changes based on the comments in this thread

Implemented in 03ba07b.

Updated tests/theme-toggle.test.js to make timer handling deterministic and failure-safe:

Added afterEach in the theme-transition class suite to always run pending timers, clear timers, restore real timers, and reset theme-transition class.
Switched the “adds theme-transition class on toggle” test to fake timers to avoid leaking real setTimeout handles.
Removed per-test vi.useRealTimers() and centralized timer restore in afterEach so cleanup still runs if an assertion fails.

Validation run:

npx eslint tests/theme-toggle.test.js
npx vitest run tests/theme-toggle.test.js
codeql_checker (0 alerts)

Screenshot: https://github.com/user-attachments/assets/7cc6de80-0ca0-464a-8372-9e2be59d997c

github-actions · 2026-03-20T13:22:21Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

Copilot

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated no new comments.

Initial plan

0fa7e11

Copilot AI assigned Copilot and pethers Mar 20, 2026

Copilot started work on behalf of pethers March 20, 2026 09:56 View session

github-actions Bot added the size-xs Extra small change (< 10 lines) label Mar 20, 2026

Initial plan for CSS light/dark mode and full-width desktop improvements

74e1ed1

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

github-actions Bot added dashboard Interactive dashboards (Chart.js/D3.js) html-css HTML/CSS changes size-m Medium change (50-250 lines) labels Mar 20, 2026

Copilot AI changed the title ~~[WIP] Improve CSS for light and dark mode on desktop and mobile~~ Full-width desktop layout, improved light & dark mode CSS Mar 20, 2026

Copilot AI requested a review from pethers March 20, 2026 10:17

Copilot finished work on behalf of pethers March 20, 2026 10:17

Copilot started work on behalf of pethers March 20, 2026 10:17 View session

github-actions Bot added the size-l Large change (250-1000 lines) label Mar 20, 2026

fix: address code review - simplify transition selector, add metric-c…

d856b38

…ard border transition, simplify dark gradients Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

Copilot AI changed the title ~~Full-width desktop layout, improved light & dark mode CSS~~ Full-width desktop layout, improved light/dark mode theming across all pages Mar 20, 2026

Copilot finished work on behalf of pethers March 20, 2026 10:33

pethers marked this pull request as ready for review March 20, 2026 10:39

Copilot AI review requested due to automatic review settings March 20, 2026 10:39

Copilot started reviewing on behalf of pethers March 20, 2026 10:40 View session

Copilot finished work on behalf of pethers March 20, 2026 12:21

pethers requested a review from Copilot March 20, 2026 12:32

Copilot started reviewing on behalf of pethers March 20, 2026 12:34 View session

Copilot AI reviewed Mar 20, 2026

View reviewed changes

Merge branch 'main' into copilot/improve-css-light-dark-mode

ff4fa00

Copilot started work on behalf of pethers March 20, 2026 12:51 View session

test: strengthen theme-transition toggle coverage and timer assertions

45ec8fa

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

Copilot finished work on behalf of pethers March 20, 2026 12:59

pethers requested a review from Copilot March 20, 2026 12:59

Copilot started reviewing on behalf of pethers March 20, 2026 13:00 View session

Copilot AI reviewed Mar 20, 2026

View reviewed changes

Copilot started work on behalf of pethers March 20, 2026 13:08 View session

test: harden theme-transition timer cleanup in toggle tests

03ba07b

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

Copilot finished work on behalf of pethers March 20, 2026 13:17

Merge branch 'main' into copilot/improve-css-light-dark-mode

96bb42f

pethers requested a review from Copilot March 20, 2026 13:21

Copilot started reviewing on behalf of pethers March 20, 2026 13:22 View session

Copilot AI reviewed Mar 20, 2026

View reviewed changes

pethers merged commit 041498c into main Mar 20, 2026
28 checks passed

pethers deleted the copilot/improve-css-light-dark-mode branch March 20, 2026 13:28

Conversation

Copilot AI commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 20, 2026

🏷️ Automatic Labeling Summary

Label Categories

Uh oh!

github-actions Bot commented Mar 20, 2026

🔍 Lighthouse Performance Audit

Uh oh!

github-actions Bot commented Mar 20, 2026

🔍 Lighthouse Performance Audit

Uh oh!

github-actions Bot commented Mar 20, 2026

🔍 Lighthouse Performance Audit

Uh oh!

github-actions Bot commented Mar 20, 2026

🔍 Lighthouse Performance Audit

Uh oh!

github-actions Bot commented Mar 20, 2026

🔍 Lighthouse Performance Audit

Uh oh!

github-actions Bot commented Mar 20, 2026

🔍 Lighthouse Performance Audit

Uh oh!

Copilot AI commented Mar 20, 2026

Uh oh!

github-actions Bot commented Mar 20, 2026

🔍 Lighthouse Performance Audit

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

pethers commented Mar 20, 2026

Uh oh!

github-actions Bot commented Mar 20, 2026

🔍 Lighthouse Performance Audit

Uh oh!

github-actions Bot commented Mar 20, 2026

🔍 Lighthouse Performance Audit

Uh oh!

Copilot AI commented Mar 20, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

pethers commented Mar 20, 2026

Uh oh!

github-actions Bot commented Mar 20, 2026

🔍 Lighthouse Performance Audit

Uh oh!

Copilot AI commented Mar 20, 2026

Uh oh!

github-actions Bot commented Mar 20, 2026

🔍 Lighthouse Performance Audit

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Reviewers

Copilot AI commented Mar 20, 2026 •

edited

Loading