fix: news article CSS — fix SWOT grid overlap, constrain article width, improve dark/light themes by Copilot · Pull Request #1502 · Hack23/riksdagsmonitor

Copilot · 2026-04-01T09:20:13Z

Stakeholder SWOT cards overlap severely because the grid uses auto-fit minmax(300px, 1fr) which crams 6 cards side-by-side, each containing a nested 2×2 SWOT quadrant grid that has no room. Article prose sprawls to full viewport width with no readable constraint.

SWOT grid layout fix (`styles/components/swot.css`)

Root cause: stakeholder-swot-grid used repeat(auto-fit, minmax(300px, 1fr)) — replaced with single-column default, 2-col at ≥1024px
Added overflow: hidden; word-wrap: break-word; min-width: 0 on quadrants/cards to prevent text bleed
Reduced quadrant font sizes slightly (0.95rem headings, 0.9rem items) for better fit

/* Before — causes overlap with 6+ cards */
.stakeholder-swot-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* After — each card gets enough width for nested 2×2 grid */
.stakeholder-swot-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .stakeholder-swot-grid { grid-template-columns: 1fr 1fr; }
}

Article readability (`styles.css`)

Constrained .news-article to max-width: 1200px (was 100% in two competing declarations)
Added max-width: 75ch on article paragraphs for optimal line length
Added responsive image rules: max-width: 100%; height: auto; display: block

Dark/light theme support

Added dark-mode SWOT overrides with increased opacity backgrounds and lighter heading colors per quadrant
Added light-mode SWOT overrides with clean white/light backgrounds
Added dark-mode styles for .article-sources, .article-lede, entry cards

Missing styles

Added .article-lede, .interpellation-entry, .motion-entry card styles with border-left accent, background, padding, and RTL support — these classes were used in article HTML but had no CSS

github-actions · 2026-04-01T09:20:54Z

🏷️ Automatic Labeling Summary

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

Applied Labels: No labels applied yet

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-04-01T09:21:19Z

🔍 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

…idth, add dark/light theme support - Fix stakeholder SWOT grid layout: change from auto-fit minmax(300px) to single-column (2-col on 1024px+) so nested 2×2 grids don't overlap - Constrain article container to max-width: 1200px for readability - Add paragraph max-width: 75ch for optimal line length - Add image responsive sizing (max-width: 100%, height: auto) - Add dark theme SWOT color overrides for better contrast - Add missing .article-lede, .interpellation-entry, .motion-entry styles - Add overflow/word-wrap on SWOT quadrants to prevent text overflow - Add RTL support for new entry card styles Agent-Logs-Url: https://github.com/Hack23/riksdagsmonitor/sessions/e330f260-5ac3-4443-a63c-6a231b2daeae Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

github-actions · 2026-04-01T10:54:38Z

🔍 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 updates the site’s news-article styling to improve readability and fix SWOT/stakeholder SWOT layout issues, including better dark/light theme presentation for these components.

Changes:

Adjusted SWOT/stakeholder SWOT grid rules to prevent card/quadrant overlap and text bleed; added theme-specific overrides.
Constrained .news-article container width and added new article content rules (paragraph width, image/figure handling).
Added styling for .article-lede, .interpellation-entry, and .motion-entry blocks used in generated article HTML.

Reviewed changes

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

File	Description
styles/components/swot.css	Fixes stakeholder SWOT grid layout and adds overflow/wrapping/theme overrides for SWOT components.
styles.css	Constrains article container width, improves prose/images rendering, and adds missing card styles for article ledes and document entry blocks.

Copilot · 2026-04-01T11:16:29Z

styles/components/swot.css

  border: 2px solid var(--border-color, #ddd);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  overflow: hidden;


overflow: hidden on .swot-quadrant can clip focus outlines/indicators for interactive content inside the quadrant (e.g., the <details class="swot-justification"><summary>…</summary>…</details> blocks used in news articles). Consider avoiding overflow: hidden here and instead rely on wrapping (overflow-wrap, word-break) or apply overflow handling to a more specific inner element so keyboard focus remains fully visible.

Suggested change

overflow: hidden;

Copilot · 2026-04-01T11:16:29Z

styles/components/swot.css

+@media (max-width: 500px) {
+  .news-article .stakeholder-swot-card .swot-grid {
+    grid-template-columns: 1fr;
+  }
+}


The nested .swot-grid inside stakeholder cards switches to 1 column only at max-width: 500px, which introduces a one-off breakpoint that doesn’t match the rest of the site’s responsive breakpoints (e.g. 480px/768px are used widely in styles.css). Align this breakpoint with the existing set to keep responsive behavior predictable and easier to maintain.

Copilot · 2026-04-01T11:16:30Z

styles.css

 .news-article .article-content p {
  margin: 0 0 1.35rem 0;
  line-height: 1.8;
+  max-width: 75ch;
+}


The max-width: 75ch paragraph constraint only applies to p inside .article-content. Several article templates (e.g. weekly-review pages) place prose directly under .news-article sections without an .article-content wrapper, so this readability fix won’t apply consistently. Consider broadening the selector (e.g. include .news-article .article-section p / similar) while excluding metadata/nav areas as needed.

Copilot · 2026-04-01T11:16:30Z

styles.css

+.news-article .interpellation-entry h4,
+.news-article .motion-entry h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1rem;
+  color: var(--header-color, #006633);
+}


.motion-entry blocks in existing news pages use an h3 heading (not h4), but the new card heading styles target only .motion-entry h4. As a result, motion titles won’t get the intended styling. Update the selector to cover the actual heading level used (or style both h3 and h4 for robustness).

Initial plan

9a895d3

Copilot AI assigned Copilot and pethers Apr 1, 2026

Copilot started work on behalf of pethers April 1, 2026 09:20 View session

github-actions bot added the size-xs Extra small change (< 10 lines) label Apr 1, 2026

Copilot AI requested a review from pethers April 1, 2026 10:15

Copilot stopped work on behalf of pethers due to an error April 1, 2026 10:15
The session was cancelled by the user.

Copilot started work on behalf of pethers April 1, 2026 10:48 View session

github-actions bot added html-css HTML/CSS changes size-m Medium change (50-250 lines) labels Apr 1, 2026

Copilot AI changed the title ~~[WIP] Improve CSS for news/index and articles~~ fix: news article CSS — fix SWOT grid overlap, constrain article width, improve dark/light themes Apr 1, 2026

Copilot finished work on behalf of pethers April 1, 2026 10:57

pethers approved these changes Apr 1, 2026

View reviewed changes

pethers marked this pull request as ready for review April 1, 2026 11:07

Copilot AI review requested due to automatic review settings April 1, 2026 11:07

pethers merged commit 3467365 into main Apr 1, 2026
17 checks passed

pethers deleted the copilot/improve-css-for-news-index-articles branch April 1, 2026 11:08

Copilot started reviewing on behalf of pethers April 1, 2026 11:09 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: news article CSS — fix SWOT grid overlap, constrain article width, improve dark/light themes#1502

fix: news article CSS — fix SWOT grid overlap, constrain article width, improve dark/light themes#1502
pethers merged 2 commits intomainfrom
copilot/improve-css-for-news-index-articles

Copilot AI commented Apr 1, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 1, 2026

Uh oh!

github-actions bot commented Apr 1, 2026

Uh oh!

github-actions bot commented Apr 1, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

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

Uh oh!

SWOT grid layout fix (styles/components/swot.css)

Article readability (styles.css)

Dark/light theme support

Missing styles

Uh oh!

github-actions bot commented Apr 1, 2026

🏷️ Automatic Labeling Summary

Label Categories

Uh oh!

github-actions bot commented Apr 1, 2026

🔍 Lighthouse Performance Audit

Uh oh!

github-actions bot commented Apr 1, 2026

🔍 Lighthouse Performance Audit

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Apr 1, 2026 •

edited

Loading

SWOT grid layout fix (`styles/components/swot.css`)

Article readability (`styles.css`)