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

Improve Containers table/tab readability: bold centered headers, taller rows, filing-cabinet tabs

Browse source
This commit is contained in:
Claude 2026-06-21 08:47:52 +00:00
parent 5703f93027
commit 98b69e47d5
No known key found for this signature in database
1 changed files with 33 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/pages/Containers.tsx
View file

@ -305,7 +305,7 @@ export default function Containers() {
</div>
{/* Intra-page tab bar */}
<div className="flex items-center gap-1 border-b border-white/10">
<div className="flex items-end gap-1 border-b border-white/10">
<TabButton label="Containers" active={activeTab === 'list'} onClick={() => setActiveTab('list')} />
{detailTabs.map((t) => (
<TabButton
@ -331,14 +331,14 @@ export default function Containers() {
<div style={cardBase} className="overflow-hidden">
<table className="w-full text-sm">
<thead>
<tr style={{ color: TEXT_SECONDARY, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
<th className="px-3 py-2 text-left font-medium">Name</th>
<th className="px-3 py-2 text-left font-medium">Image</th>
<th className="px-3 py-2 text-left font-medium">State</th>
<th className="px-3 py-2 text-left font-medium">CPU</th>
<th className="px-3 py-2 text-left font-medium">Memory</th>
<th className="px-3 py-2 text-left font-medium">Ports</th>
<th className="px-3 py-2 text-right font-medium">Actions</th>
<tr style={{ color: TEXT_PRIMARY, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
<th className="px-3 py-3 text-center text-base font-bold">Name</th>
<th className="px-3 py-3 text-center text-base font-bold">Image</th>
<th className="px-3 py-3 text-center text-base font-bold">State</th>
<th className="px-3 py-3 text-center text-base font-bold">CPU</th>
<th className="px-3 py-3 text-center text-base font-bold">Memory</th>
<th className="px-3 py-3 text-center text-base font-bold">Ports</th>
<th className="px-3 py-3 text-center text-base font-bold">Actions</th>
</tr>
</thead>
<tbody>
@ -354,67 +354,67 @@ export default function Containers() {
const busy = busyId === c.id
return (
<tr key={c.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
<td className="px-3 py-2">
<td className="px-3 py-4 text-center text-[15px]">
<button
onClick={() => openDetail(c)}
className="text-left hover:underline"
className="hover:underline"
style={{ color: GOLD }}
title="View details"
>
{c.name}
</button>
</td>
<td className="px-3 py-2" style={{ color: TEXT_SECONDARY }}>
<td className="px-3 py-4 text-center text-[15px]" style={{ color: TEXT_SECONDARY }}>
{c.image}
</td>
<td className="px-3 py-2">
<span className="flex items-center gap-1.5">
<td className="px-3 py-4 text-center text-[15px]">
<span className="flex items-center justify-center gap-1.5">
<span className="inline-block h-2 w-2 rounded-full" style={{ background: stateColor(c.state) }} />
<span style={{ color: TEXT_PRIMARY }}>{c.status}</span>
</span>
</td>
<td className="px-3 py-2" style={{ color: TEXT_SECONDARY }}>
<td className="px-3 py-4 text-center text-[15px]" style={{ color: TEXT_SECONDARY }}>
{stats ? `${stats.cpuPercent.toFixed(1)}%` : '—'}
</td>
<td className="px-3 py-2" style={{ color: TEXT_SECONDARY }}>
<td className="px-3 py-4 text-center text-[15px]" style={{ color: TEXT_SECONDARY }}>
{stats ? `${formatBytes(stats.memUsage)} / ${formatBytes(stats.memLimit)}` : '—'}
</td>
<td className="px-3 py-2" style={{ color: TEXT_SECONDARY }}>
<td className="px-3 py-4 text-center text-[15px]" style={{ color: TEXT_SECONDARY }}>
{c.ports || '—'}
</td>
<td className="px-3 py-2">
<div className="flex items-center justify-end gap-1.5">
<td className="px-3 py-4 text-[15px]">
<div className="flex items-center justify-center gap-2">
{canManage ? (
<>
{c.state === 'running' ? (
<>
<button disabled={busy} onClick={() => runAction(c, 'pause')} title="Pause" style={{ color: TEXT_SECONDARY }}>
<Pause size={14} />
<Pause size={16} />
</button>
<button disabled={busy} onClick={() => runAction(c, 'restart')} title="Restart" style={{ color: TEXT_SECONDARY }}>
<RotateCw size={14} />
<RotateCw size={16} />
</button>
<button disabled={busy} onClick={() => runAction(c, 'stop')} title="Stop" style={{ color: TEXT_SECONDARY }}>
<Square size={14} />
<Square size={16} />
</button>
<button disabled={busy} onClick={() => setExecRow(c)} title="Exec terminal" style={{ color: GOLD }}>
<TerminalSquare size={14} />
<TerminalSquare size={16} />
</button>
</>
) : c.state === 'paused' ? (
<button disabled={busy} onClick={() => runAction(c, 'unpause')} title="Unpause" style={{ color: TEXT_SECONDARY }}>
<PlayCircle size={14} />
<PlayCircle size={16} />
</button>
) : (
<button disabled={busy} onClick={() => runAction(c, 'start')} title="Start" style={{ color: TEXT_SECONDARY }}>
<Play size={14} />
<Play size={16} />
</button>
)}
<button disabled={busy} onClick={() => setLogsRow(c)} title="Logs" style={{ color: TEXT_SECONDARY }}>
<ScrollText size={14} />
<ScrollText size={16} />
</button>
<button disabled={busy} onClick={() => removeRow(c)} title="Remove" style={{ color: '#E74C3C' }}>
<Trash2 size={14} />
<Trash2 size={16} />
</button>
</>
) : (
@ -450,17 +450,20 @@ function TabButton({ label, active, onClick, onClose }: { label: string; active:
return (
<div
onClick={onClick}
className="flex cursor-pointer items-center gap-2 rounded-t-md px-3 py-1.5 text-xs"
className="flex cursor-pointer items-center gap-2 rounded-t-md px-4 py-2 text-sm font-semibold"
style={{
color: active ? GOLD : TEXT_SECONDARY,
borderBottom: active ? `2px solid ${GOLD}` : '2px solid transparent',
backgroundColor: active ? 'rgba(200,164,52,0.12)' : 'rgba(255,255,255,0.02)',
border: active ? '1px solid rgba(200,164,52,0.35)' : '1px solid rgba(255,255,255,0.06)',
borderBottom: active ? '1px solid rgba(200,164,52,0.12)' : '1px solid rgba(255,255,255,0.06)',
marginBottom: '-1px',
maxWidth: '200px',
}}
>
<span className="truncate">{label}</span>
{onClose && (
<X
size={12}
size={13}
onClick={(e) => {
e.stopPropagation()
onClose()