From f00fa8e9a2006ecb9e6ebad6a044b87a667d1129 Mon Sep 17 00:00:00 2001
From: datacas <4690232+datacas@users.noreply.github.com>
Date: Tue, 27 Oct 2026 19:07:00 +0100
Subject: [PATCH] fix(ui): balance the About panel grid

The facts row was declared with four columns for three items, leaving an
empty cell painted with the grid background. The four safety notes were
still laid out in three columns, so the last one sat alone on a new row.

- facts: three equal columns
- notes: two columns on desktop, one below 1180px
- icon colours follow the new note order
---
 src/styles/global.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 7ae1519..52c4e0d 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2261,7 +2261,7 @@ input:focus-visible + .switch {
 
 .about-facts {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   overflow: hidden;
   background: var(--line-soft);
@@ -2293,7 +2293,7 @@ input:focus-visible + .switch {
 
 .about-notes {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 10px;
   margin-top: 16px;
 }
@@ -2327,6 +2327,10 @@ input:focus-visible + .switch {
   color: var(--accent);
 }
 
+.about-notes p:nth-child(4) svg {
+  color: var(--good);
+}
+
 .about-foot {
   display: flex;
   align-items: center;