sam/dev_arc_aws
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add background images to Connected Integrations and Integration Health cards; fix Node Status scroll clipping (#9)

Browse source 
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>
This commit is contained in:
Samuel James 2026-06-20 06:54:21 -04:00 • committed by GitHub
parent ddee4b498d
commit b11150d286
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/BottomRow.tsx
View file

@ -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">

6
src/pages/Infrastructure.tsx
View file

@ -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 ? (