From b11150d286681358310313fa6e058dbf29a14956 Mon Sep 17 00:00:00 2001
From: Samuel James <143277412+SamuelSJames@users.noreply.github.com>
Date: Sat, 20 Jun 2026 06:54:21 -0400
Subject: [PATCH] Add background images to Connected Integrations and
 Integration Health cards; fix Node Status scroll clipping (#9)

Both cards were flat with no background frame. Node Status used a centered grid inside an overflow-hidden card, which clipped rows beyond the visible area instead of letting them scroll into view.


Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/components/BottomRow.tsx | 22 +++++++++++++++++++++-
 src/pages/Infrastructure.tsx |  6 ++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/BottomRow.tsx b/src/components/BottomRow.tsx
index 7e0a427..59e5afe 100644
--- a/src/components/BottomRow.tsx
+++ b/src/components/BottomRow.tsx
@@ -21,6 +21,25 @@ const cardBase: React.CSSProperties = {
   overflow: 'hidden',
 }
 
+const framedCardBase: React.CSSProperties = {
+  backgroundImage: 'url(/blank-kpi-bg.png)',
+  backgroundSize: '100% 100%',
+  backgroundPosition: 'center',
+  backgroundRepeat: 'no-repeat',
+  borderRadius: '12px',
+  padding: '20px',
+  transition: 'border-color 0.2s ease',
+  position: 'relative',
+  overflow: 'hidden',
+}
+
+const cardDim: React.CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  pointerEvents: 'none',
+  backgroundColor: 'rgba(8, 8, 10, 0.45)',
+}
+
 const statusColor: Record<string, string> = {
   connected: '#2ECC71',
   error: '#E74C3C',
@@ -38,7 +57,8 @@ export default function BottomRow() {
   return (
     <div className="grid w-full grid-cols-[1.8fr_1fr] gap-6">
       {/* Connected Integrations */}
-      <div style={cardBase} className="hover:!border-gold/15">
+      <div style={framedCardBase} className="hover:!border-gold/15">
+        <div style={cardDim} />
         <div style={{ position: 'absolute', top: 0, left: '5%', right: '5%', height: '1px', background: 'linear-gradient(90deg, transparent, rgba(200,164,52,0.15), transparent)', pointerEvents: 'none' }} />
 
         <div className="relative z-10">
diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index c6f942d..00e6702 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -246,7 +246,7 @@ export default function Infrastructure() {
             <div className="relative z-10 flex flex-1 flex-col">
               <h3 style={sectionTitle}>Node Status</h3>
               {resources && resources.length > 0 ? (
-                <div className="grid flex-1 grid-cols-4 gap-3 content-center">
+                <div className="grid flex-1 grid-cols-4 content-start gap-3" style={{ overflowY: 'auto' }}>
                   {resources.map((node, i) => (
                     <div
                       key={i}
@@ -283,7 +283,9 @@ export default function Infrastructure() {
       <div className="shrink-0">
         <div className="grid w-full grid-cols-2 gap-6">
           {/* Integration Health */}
-          <div style={{ ...cardBase, height: 'auto' }} className="hover:!border-gold/15">
+          <div style={{ ...framedCard('/blank-kpi-bg.png'), height: 'auto', padding: '20px' }} className="hover:!border-gold/15">
+            <div style={cardDim} />
+            <div style={cardVignette} />
             <div className="relative z-10 flex flex-col">
               <h3 style={sectionTitle}>Integration Health</h3>
               {integrations && integrations.length > 0 ? (