🐛 fix: align dashboard with secured APIs

This commit is contained in:
2026-08-13 03:29:33 +07:00
parent e90dc8382b
commit 3f09e330be
47 changed files with 1280 additions and 397 deletions
@@ -85,7 +85,7 @@ function ServerDetails({ metadata }: { metadata: ServerMetadata }) {
<DetailRow label="Behind Proxies" value={connectedProxies.length.toString()} />
<IdentifierList
items={connectedProxies}
className="text-sm bg-blue-50 border border-blue-200"
className="text-sm bg-info/12 border border-info/30"
/>
</DetailSection>
)}
@@ -129,7 +129,7 @@ function ProxyDetails({ metadata }: { metadata: ProxyMetadata }) {
{connectedServers.length > 0 && (
<IdentifierList
items={connectedServers}
className="text-sm bg-green-50 border border-green-200"
className="text-sm bg-success/12 border border-success/30"
/>
)}
</DetailSection>
@@ -166,7 +166,7 @@ function K8sNodeDetails({ metadata }: { metadata: K8sNodeMetadata }) {
<p className="text-sm font-medium mb-2">Server Pods:</p>
<IdentifierList
items={serverPods}
className="text-xs bg-green-50 border border-green-200"
className="text-xs bg-success/12 border border-success/30"
withMargin={false}
/>
</div>
@@ -177,7 +177,7 @@ function K8sNodeDetails({ metadata }: { metadata: K8sNodeMetadata }) {
<p className="text-sm font-medium mb-2">Proxy Pods:</p>
<IdentifierList
items={proxyPods}
className="text-xs bg-blue-50 border border-blue-200"
className="text-xs bg-info/12 border border-info/30"
withMargin={false}
/>
</div>
@@ -204,7 +204,7 @@ function KubernetesWorkloadDetails({
</div>
<IdentifierList
items={k8sNodes}
className="text-xs bg-blue-50 border border-blue-200 ml-6"
className="text-xs bg-info/12 border border-info/30 ml-6"
withMargin={false}
/>
</div>
@@ -58,7 +58,7 @@ export function TopologyToolbar({ filters, onFiltersChange, metadata }: Topology
];
return (
<div className="flex min-w-[280px] max-w-[calc(100vw-5rem)] flex-col gap-3 rounded-sm border-2 border-foreground bg-card/95 p-3 shadow-[5px_5px_0_color-mix(in_oklch,var(--foreground)_16%,transparent)] backdrop-blur-sm sm:min-w-[350px] sm:p-4">
<div className="flex w-[calc(100vw-4.5rem)] max-w-[350px] flex-col gap-3 rounded-sm border-2 border-foreground bg-card/95 p-3 shadow-[5px_5px_0_color-mix(in_oklch,var(--foreground)_16%,transparent)] backdrop-blur-sm sm:w-[350px] sm:p-4">
<div className="grid grid-cols-3 gap-2">
{stats.map(({ label, value, icon: Icon }) => (
<div key={label} className="flex flex-col items-center border bg-muted/50 p-2">
@@ -100,7 +100,7 @@ export function TopologyToolbar({ filters, onFiltersChange, metadata }: Topology
Filters
</Button>
</PopoverTrigger>
<PopoverContent className="w-80" align="start">
<PopoverContent className="w-[calc(100vw-3rem)] max-w-80" align="start">
<div className="space-y-4">
<div>
<h4 className="font-semibold mb-3">Show/Hide</h4>