Refine homepage hero hierarchy and upgrade /news landing page browsing UX by Copilot · Pull Request #913 · Hack23/riksdagsmonitor

Copilot · 2026-03-07T10:10:11Z

Inspect the review thread comments and current generator/CSS/test implementation
Fix homepage hero glass-panel centering and stabilize news hero date formatting across time zones
Replace the news hero article summary with dedicated total-articles copy for all supported languages
Make the generator test validate structure instead of brittle English copy
Re-run targeted validation, capture updated screenshot, run review/security checks, and reply to the PR comment

💡 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.

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

github-actions · 2026-03-07T10:43:49Z

🔍 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

This PR refines the top-of-page visual hierarchy for the homepage hero and significantly improves the /news landing page browsing experience by enhancing generated markup and updating shared styles so all language variants remain aligned.

Changes:

Extend the news index generator template to emit hero metadata (article count + latest date) and a language coverage summary; move the live result counter above the grid.
Add test coverage to assert the presence of the new generated hero elements.
Update shared CSS to strengthen hero readability (glass panel treatment), tighten breadcrumb layout, connect the election countdown to the hero area, and polish news filters/cards (sticky filter bar, improved focus/hover, excerpt clamping, safer responsive grid).

Reviewed changes

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

File	Description
`scripts/generate-news-indexes/template.ts`	Generates new `/news` hero metadata + language coverage markup; repositions the live article counter above the grid.
`styles.css`	Implements the new hero/breadcrumb/election-countdown styling and refines `/news` browsing UI (sticky filters, card polish, responsive grid).
`tests/generate-news-indexes.test.ts`	Adds assertions to ensure the generator emits the new hero metadata and language coverage elements.

Copilot · 2026-03-07T10:45:41Z

+.hero-banner-overlay::before {
+  content: "";
+  position: absolute;
+  inset: auto auto 2rem;


.hero-banner-overlay::before uses inset: auto auto 2rem; with a fixed width, but doesn’t set left/right (or an equivalent centering rule). For an absolutely positioned element this typically resolves to the “static” horizontal position (often the left edge), so the glass panel may not actually be centered. Set explicit horizontal positioning (e.g., left: 50% + transform: translateX(-50%), or inset: auto 0 2rem 0 with margin: 0 auto).

Suggested change

inset: auto auto 2rem;

left: 50%;

bottom: 2rem;

transform: translateX(-50%);

Copilot · 2026-03-07T10:45:41Z

+      expect(enContent).toContain('Showing');
+      expect(enContent).toContain('Available in:');


This test asserts specific English copy ("Showing", "Available in:"). That makes it brittle against harmless i18n copy tweaks (or punctuation changes) while not actually validating the generated structure. Prefer asserting the presence/shape of the hero elements (classes + <time datetime="..."> when present) and/or deriving expected strings from the generator constants rather than hardcoding English literals.

Suggested change

expect(enContent).toContain('Showing');

expect(enContent).toContain('Available in:');

// Ensure hero metadata includes a semantic time element with datetime attribute

expect(enContent).toMatch(/class="news-hero-meta"[\s\S]*?<time[^>]+datetime="/);

// Ensure language coverage section contains at least one language attribute

expect(enContent).toMatch(/class="news-hero-languages"[\s\S]*?lang="/);

Copilot · 2026-03-07T10:45:41Z

+  return new Date(date).toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });


formatDisplayDate() parses a YYYY-MM-DD string via new Date(date), which is interpreted as UTC midnight and can render as the previous/next day for users in other time zones when formatted with toLocaleDateString(). To keep the displayed date stable, parse as UTC explicitly and/or format with Intl.DateTimeFormat(..., { timeZone: 'UTC' }) so the calendar day doesn't shift by client locale/time zone.

Suggested change

return new Date(date).toLocaleDateString(locale, {

year: 'numeric',

month: 'long',

day: 'numeric',

});

// Ensure stable calendar dates across time zones by parsing as UTC and formatting in UTC.

const [yearStr, monthStr, dayStr] = date.split('-');

const year = Number(yearStr);

const month = Number(monthStr);

const day = Number(dayStr);

if (!Number.isFinite(year) || !Number.isFinite(month) || !Number.isFinite(day)) {

// Fallback: return the original string if parsing fails.

return date;

}

const utcDate = new Date(Date.UTC(year, month - 1, day));

return new Intl.DateTimeFormat(locale, {

year: 'numeric',

month: 'long',

day: 'numeric',

timeZone: 'UTC',

}).format(utcDate);

Copilot · 2026-03-07T10:45:41Z

+  const latestDate: string | null = displayArticles[0]?.date ?? null;
+  const articleSummary: string = formatShowingSummary(lang.i18n.showing, displayArticles.length, displayArticles.length);
+  const allLanguagesSummary: string = generateAvailableLanguages(Object.keys(LANGUAGES), langKey);


The hero articleSummary is built using lang.i18n.showing with shown and total both set to displayArticles.length, which produces copy like “Showing X of X articles”. This duplicates the live #article-counter below (which also uses the “showing” phrasing) and doesn’t match the PR description’s “total article count” stat. Consider introducing a dedicated i18n string for the hero (e.g., “Total articles: {total}”) and keep the “showing {shown} of {total}” template only for the dynamic counter.

pethers · 2026-03-07T10:49:17Z

@copilot apply changes based on the comments in this thread

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

Copilot · 2026-03-07T10:58:16Z

@copilot apply changes based on the comments in this thread

Applied in d7281dc. The hero glass panel is now explicitly centered, the news hero uses a dedicated localized total-articles label with UTC-stable date formatting, and the generator test now validates structure instead of brittle English copy. Screenshots: homepage https://github.com/user-attachments/assets/17a78058-9c14-4aad-9a0c-afb32590912b and news https://github.com/user-attachments/assets/54683ec3-e041-4fd8-8e0a-8de0ba8a38fd

github-actions · 2026-03-07T11:12: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

Pull request overview

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

Initial plan

081a038

Copilot AI assigned Copilot and pethers Mar 7, 2026

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

Copilot AI and others added 2 commits March 7, 2026 10:22

feat: refine homepage and news landing page ux

7be12ed

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

chore: finalize ui ux refinements

7d31cc3

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

Copilot AI changed the title ~~[WIP] Improve UI/UX for riksdagsmonitor website~~ Refine homepage hero hierarchy and upgrade /news landing page browsing UX Mar 7, 2026

Copilot finished work on behalf of pethers March 7, 2026 10:26

pethers requested a review from Copilot March 7, 2026 10:42

github-actions Bot added html-css HTML/CSS changes testing Test coverage refactor Code refactoring size-l Large change (250-1000 lines) labels Mar 7, 2026

Copilot started reviewing on behalf of pethers March 7, 2026 10:43 View session

Copilot AI reviewed Mar 7, 2026

View reviewed changes

Copilot started work on behalf of pethers March 7, 2026 10:49 View session

fix: address follow-up review feedback

d7281dc

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

Copilot finished work on behalf of pethers March 7, 2026 10:58

pethers requested a review from Copilot March 7, 2026 11:11

Copilot started reviewing on behalf of pethers March 7, 2026 11:11 View session

Copilot AI reviewed Mar 7, 2026

View reviewed changes

pethers marked this pull request as ready for review March 7, 2026 11:52

pethers merged commit c017aa6 into main Mar 7, 2026
24 checks passed

pethers deleted the copilot/improve-ui-ux-riksdagsmonitor branch March 7, 2026 11:52

pethers mentioned this pull request Mar 7, 2026

Revert "Refine homepage hero hierarchy and upgrade /news landing page browsing UX" #915

Merged

Copilot AI mentioned this pull request Mar 7, 2026

Replace tiny logo with full-width hero banner across all pages #916

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Refine homepage hero hierarchy and upgrade /news landing page browsing UX#913

Refine homepage hero hierarchy and upgrade /news landing page browsing UX#913
pethers merged 4 commits into
mainfrom
copilot/improve-ui-ux-riksdagsmonitor

Copilot AI commented Mar 7, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 7, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 7, 2026

Uh oh!

Copilot AI Mar 7, 2026

Uh oh!

Copilot AI Mar 7, 2026

Uh oh!

Copilot AI Mar 7, 2026

Uh oh!

pethers commented Mar 7, 2026

Uh oh!

Copilot AI commented Mar 7, 2026

Uh oh!

github-actions Bot commented Mar 7, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-  inset: auto auto 2rem;
+  left: 50%;
+  bottom: 2rem;
+  transform: translateX(-50%);

		expect(enContent).toContain('Showing');
		expect(enContent).toContain('Available in:');

-      expect(enContent).toContain('Showing');
-      expect(enContent).toContain('Available in:');
+      // Ensure hero metadata includes a semantic time element with datetime attribute
+      expect(enContent).toMatch(/class="news-hero-meta"[\s\S]*?<time[^>]+datetime="/);
+      // Ensure language coverage section contains at least one language attribute
+      expect(enContent).toMatch(/class="news-hero-languages"[\s\S]*?lang="/);

-  return new Date(date).toLocaleDateString(locale, {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  });
+  // Ensure stable calendar dates across time zones by parsing as UTC and formatting in UTC.
+  const [yearStr, monthStr, dayStr] = date.split('-');
+  const year = Number(yearStr);
+  const month = Number(monthStr);
+  const day = Number(dayStr);
+  if (!Number.isFinite(year) || !Number.isFinite(month) || !Number.isFinite(day)) {
+    // Fallback: return the original string if parsing fails.
+    return date;
+  }
+  const utcDate = new Date(Date.UTC(year, month - 1, day));
+  return new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    timeZone: 'UTC',
+  }).format(utcDate);

Uh oh!

Uh oh!

Conversation

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

Uh oh!

Uh oh!

github-actions Bot commented Mar 7, 2026

🔍 Lighthouse Performance Audit

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

pethers commented Mar 7, 2026

Uh oh!

Copilot AI commented Mar 7, 2026

Uh oh!

github-actions Bot commented Mar 7, 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

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Mar 7, 2026 •

edited

Loading