From 98b69e47d556bbe816dc18d9440c75ccbca4dbb6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 21 Jun 2026 08:47:52 +0000
Subject: [PATCH] Improve Containers table/tab readability: bold centered
 headers, taller rows, filing-cabinet tabs

---
 src/pages/Containers.tsx | 63 +++++++++++++++++++++-------------------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/pages/Containers.tsx b/src/pages/Containers.tsx
index 8a6f1e9..bef726f 100644
--- a/src/pages/Containers.tsx
+++ b/src/pages/Containers.tsx
@@ -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()