From 99ca1ba39c02b1022475d307a43cba9d7e8f63a3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 21 Jun 2026 11:38:16 +0000
Subject: [PATCH] Tighten Integration Health row spacing and make the list
 scrollable

Status text now sits close to the name instead of being pushed to the
far edge, and the list caps at a fixed height with scroll so it stays
usable as more integrations are added.
---
 src/pages/Infrastructure.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index 3b4401f..4cfdec3 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -289,9 +289,9 @@ export default function Infrastructure() {
             <div className="relative z-10 flex flex-col">
               <h3 style={sectionTitle}>Integration Health</h3>
               {integrations && integrations.length > 0 ? (
-                <div className="flex flex-col gap-2">
+                <div className="scrollbar-ghost flex flex-col gap-2" style={{ maxHeight: '140px', overflowY: 'auto' }}>
                   {integrations.map((i) => (
-                    <div key={i.id} className="flex items-center justify-between">
+                    <div key={i.id} className="flex items-center gap-3">
                       <span className="flex items-center gap-2" style={{ fontSize: '12px', color: '#E8E6E0' }}>
                         <CircleCheck size={13} style={{ color: i.status === 'connected' ? '#2ECC71' : i.status === 'error' ? '#E74C3C' : '#7A7D85' }} />
                         {i.name}