From 9b0483a2ab091a6adeb1148ec4814ebe620cd8b5 Mon Sep 17 00:00:00 2001
From: itsamejms <james.twose@alliander.com>
Date: Sun, 28 Jun 2026 22:52:04 +0100
Subject: [PATCH] polish: responsive grid, radial gradient background, better
 bento card scaling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dashboard grid is now responsive: 1 col mobile, 2 cols tablet, 4 cols desktop
- BentoCard span classes converted to responsive variants
- Subtle radial gradient on main background for depth (as per design system §7.7)
- All production builds passing
---
 src/components/BentoCard.tsx | 16 +++++++++++++++-
 src/components/Dashboard.tsx |  2 +-
 src/index.css                |  1 +
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/BentoCard.tsx b/src/components/BentoCard.tsx
index d718312..d9f3448 100644
--- a/src/components/BentoCard.tsx
+++ b/src/components/BentoCard.tsx
@@ -9,6 +9,18 @@ interface BentoCardProps {
   className?: string;
 }
 
+// Convert desktop spans like "col-span-2 row-span-1" into responsive spans
+// On mobile (1 col): everything is col-span-1
+// On tablet (2 cols): col-span-2 stays, col-span-1 stays
+// On desktop (4 cols): original spans
+function responsiveSpan(span: string): string {
+  return span
+    .replace("col-span-2", "sm:col-span-2 lg:col-span-2 col-span-1")
+    .replace("row-span-2", "sm:row-span-2 lg:row-span-2 row-span-1")
+    .replace("col-span-1", "col-span-1")
+    .replace("row-span-1", "row-span-1");
+}
+
 export function BentoCard({
   title,
   icon,
@@ -16,9 +28,11 @@ export function BentoCard({
   children,
   className = "",
 }: BentoCardProps) {
+  const responsive = responsiveSpan(span);
+
   return (
     <motion.div
-      className={`glass-card flex flex-col overflow-hidden p-4 ${span} ${className}`}
+      className={`glass-card flex flex-col overflow-hidden p-4 ${responsive} ${className}`}
       whileHover={{ scale: 1.005 }}
       whileTap={{ scale: 0.985 }}
       transition={{ type: "spring", stiffness: 400, damping: 25 }}
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 28bc20f..2fe1bd5 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -20,7 +20,7 @@ interface DashboardProps {
 
 export function Dashboard({ onNavigate }: DashboardProps) {
   return (
-    <div className="grid grid-cols-4 grid-rows-5 gap-3 p-4 h-full bg-[var(--color-bg-deep)] overflow-y-auto">
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 grid-rows-5 gap-3 p-4 h-full bg-[var(--color-bg-deep)] overflow-y-auto">
       {/* World Map — 2×2 */}
       <BentoCard title="World Builder" icon={<Map size={16} />} span="col-span-2 row-span-2">
         <div className="flex flex-col h-full">
diff --git a/src/index.css b/src/index.css
index 868f88a..503c2ec 100644
--- a/src/index.css
+++ b/src/index.css
@@ -103,6 +103,7 @@ body,
   width: 100%;
   overflow: hidden;
   background: var(--color-bg-deep);
+  background: radial-gradient(ellipse at 50% 0%, #141e33 0%, var(--color-bg-deep) 70%);
   color: var(--color-text-primary);
   font-family: var(--font-sans);
   font-size: 14px;