diff --git a/frontend/src/components/IocFeeds.svelte b/frontend/src/components/IocFeeds.svelte index 422d2c6..e82aa10 100644 --- a/frontend/src/components/IocFeeds.svelte +++ b/frontend/src/components/IocFeeds.svelte @@ -368,11 +368,26 @@ overflow: hidden; min-height: 0; padding-bottom: 16px; } - .feed-name-cell { display: flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; } + table { width: 100%; border-collapse: collapse; } + thead { background: #f9fafb; position: sticky; top: 0; z-index: 5; } + th { + color: #374151; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.3px; + font-weight: 600; border-bottom: 2px solid #e5e7eb; padding: 0.6rem 0.75rem; + text-align: left; white-space: nowrap; + } + td { + border-bottom: 1px solid #f3f4f6; color: #1f2937; + padding: 0.55rem 0.75rem; font-size: var(--font-size-label); + vertical-align: middle; white-space: nowrap; + } + tbody tr:hover { background: #eff6ff; } + tbody tr:last-child td { border-bottom: none; } + + .feed-name-cell { display: flex; align-items: center; gap: 6px; font-weight: 500; } .muted { color: #6b7280; } - .mono { font-family: monospace; font-size: 0.78rem; } - .num-col { text-align: right; padding-right: 1.25rem; font-variant-numeric: tabular-nums; } - .error-text { color: #dc2626; font-size: 0.78rem; cursor: help; } + .mono { font-family: monospace; font-size: 0.78rem; color: #4b5563; } + .num-col { text-align: right; padding-right: 1.25rem; font-variant-numeric: tabular-nums; min-width: 60px; } + .error-text { color: #dc2626; font-size: 0.78rem; cursor: help; white-space: normal; max-width: 260px; } /* Dark mode */ :global(.dark-mode) .feed-card { background: #1e293b; border-color: #334155; } @@ -390,5 +405,11 @@ :global(.dark-mode) .tag-warn { background: #422006; color: #fcd34d; } :global(.dark-mode) .toolbar { border-bottom-color: #334155; } :global(.dark-mode) .muted { color: #94a3b8; } + :global(.dark-mode) .mono { color: #94a3b8; } :global(.dark-mode) .error-text { color: #f87171; } + :global(.dark-mode) thead { background: #111827; } + :global(.dark-mode) th { color: #9ca3af; border-bottom-color: #374151; } + :global(.dark-mode) td { color: #e5e7eb; border-bottom-color: #374151; } + :global(.dark-mode) tbody tr { background: #1f2937; } + :global(.dark-mode) tbody tr:hover { background: #374151; }