@skyhook-io/k8s-ui 1.0.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -23,10 +23,12 @@
   },
   "scripts": {
     "tsc": "tsc --noEmit",
+    "test": "vitest run",
     "format": "prettier --write \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
+    "html-to-image": "^1.11.0",
     "react-virtuoso": "^4.18.1",
     "shiki": "^4.0.0"
   },
@@ -58,6 +60,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
+    "vitest": "^4.0.18",
     "yaml": "^2.7.1"
   }
 }

package/src/components/resources/ResourcesView.tsx

@@ -1598,8 +1598,6 @@ export function ResourcesView({
   // Pinned kinds (favorites) — provided via props
   const [favoritesExpanded, setFavoritesExpanded] = useState(() => pinned.length > 0)
 
-  console.debug('[filters] ResourcesView render:', { kind: selectedKind.name, columnFilters, searchTerm, url: location.search })
-
   useEffect(() => { persistedExpandedCategories = expandedCategories }, [expandedCategories])
   // Track if this is the initial mount to avoid re-syncing on first render
   const isInitialMount = useRef(true)
@@ -2198,6 +2196,14 @@ export function ResourcesView({
     }
     // Signal that initial resource param has been processed — URL update effect can now run
     hasProcessedInitialResource.current = true
+
+    // If the URL has no kind segment (e.g., /resources), update to include the default kind
+    const base = basePath.replace(/\/$/, '')
+    const path = window.location.pathname
+    if (path === base || path === base + '/') {
+      const search = window.location.search
+      window.history.replaceState({}, '', `${base}/${selectedKind.name}${search}`)
+    }
   }, []) // Only on mount
 
   // API resources for dynamic sidebar — provided via props
@@ -3041,18 +3047,16 @@ export function ResourcesView({
     <ResourcesViewDataContext.Provider value={resourcesViewDataContextValue}>
     <div className="flex h-full w-full">
       {/* Sidebar - Resource Types */}
-      <div className="w-72 bg-theme-surface border-r border-theme-border overflow-y-auto overflow-x-hidden shrink-0">
-        <div className="flex items-center gap-2 px-3 py-3 border-b border-theme-border">
-          <h2 className="text-sm font-medium text-theme-text-secondary uppercase tracking-wide shrink-0">
-            Resources
-          </h2>
-          <div className="flex-1 relative">
+      <div className="w-56 2xl:w-72 bg-theme-surface border-r border-theme-border overflow-y-auto overflow-x-hidden shrink-0">
+        <div className="px-2 py-2 border-b border-theme-border">
+          <div className="relative">
             <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-text-tertiary" />
             <input
               type="text"
-              placeholder="Filter kinds..."
+              placeholder="Filter resources..."
               value={kindFilter}
               onChange={(e) => setKindFilter(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Escape') { setKindFilter(''); (e.target as HTMLInputElement).blur() } }}
               className="w-full pl-7 pr-7 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
             {kindFilter && (
@@ -3079,7 +3083,7 @@ export function ResourcesView({
               )}
               <span className="flex-1 text-left">Favorites</span>
               {!favoritesExpanded && pinned.length > 0 && (
-                <span className="text-xs px-1.5 py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case">
+                <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center', pinned.length < 1000 ? 'w-8' : 'w-9')}>
                   {pinned.length}
                 </span>
               )}
@@ -3125,7 +3129,7 @@ export function ResourcesView({
                 <div key={category.name} className="mb-2">
                   <button
                     onClick={() => toggleCategory(category.name)}
-                    className="w-full flex items-center gap-2 px-2 py-1.5 text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary uppercase tracking-wide"
+                    className="w-full flex items-center gap-2 px-2 py-1.5 text-xs font-semibold text-theme-text-tertiary hover:text-theme-text-secondary uppercase tracking-wide"
                   >
                     {isExpanded ? (
                       <ChevronDown className="w-3 h-3" />
@@ -3134,7 +3138,7 @@ export function ResourcesView({
                     )}
                     <span className="flex-1 text-left">{category.name}</span>
                     {!isExpanded && (
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case">
+                      <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center', category.total < 1000 ? 'w-8' : 'w-9')}>
                         {category.total}
                       </span>
                     )}
@@ -3781,7 +3785,7 @@ const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps
         ref={ref}
         onClick={onClick}
         className={clsx(
-          'w-full flex items-center gap-3 px-3 py-1.5 rounded-lg text-sm transition-colors group/kind min-w-0',
+          'w-full flex items-center gap-2 px-2 xl:px-3 py-1.5 rounded-lg text-sm transition-colors group/kind min-w-0',
           isSelected
             ? 'bg-blue-500/20 text-blue-700 dark:text-blue-300'
             : forbidden
@@ -3795,36 +3799,39 @@ const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps
             {resource.kind}
           </span>
         </Tooltip>
-        {forbidden ? (
-          <Tooltip content="Insufficient permissions" position="left">
-            <Shield className="w-3.5 h-3.5 text-amber-400/60" />
-          </Tooltip>
-        ) : (
-          <span className={clsx(
-            'text-xs px-1.5 py-0.5 rounded min-w-[1.5rem] text-center',
-            isSelected ? 'bg-blue-500/30 text-blue-700 dark:text-blue-300' : 'bg-theme-elevated'
-          )}>
-            {count}
-          </span>
-        )}
-        {onTogglePin && (
-          <span
-            role="button"
-            onClick={(e) => {
-              e.stopPropagation()
-              onTogglePin()
-            }}
-            className={clsx(
-              'ml-auto p-0.5 rounded transition-all shrink-0 hover:bg-theme-hover',
-              isPinned
-                ? 'text-theme-text-secondary'
-                : 'opacity-0 group-hover/kind:opacity-100 text-theme-text-disabled'
-            )}
-            title={isPinned ? 'Unpin from favorites' : 'Pin to favorites'}
-          >
-            <Pin className={clsx('w-3.5 h-3.5', isPinned && 'fill-current')} />
-          </span>
-        )}
+        <div className="ml-auto flex items-center gap-1 shrink-0">
+          {onTogglePin && (
+            <span
+              role="button"
+              onClick={(e) => {
+                e.stopPropagation()
+                onTogglePin()
+              }}
+              className={clsx(
+                'p-0.5 rounded transition-all hover:bg-theme-hover',
+                isPinned
+                  ? 'text-theme-text-secondary'
+                  : 'opacity-0 group-hover/kind:opacity-100 text-theme-text-disabled'
+              )}
+              title={isPinned ? 'Unpin from favorites' : 'Pin to favorites'}
+            >
+              <Pin className={clsx('w-3 h-3', isPinned && 'fill-current')} />
+            </span>
+          )}
+          {forbidden ? (
+            <Tooltip content="Insufficient permissions" position="left">
+              <Shield className="w-3.5 h-3.5 text-amber-400/60" />
+            </Tooltip>
+          ) : (
+            <span className={clsx(
+              'text-xs py-0.5 rounded text-center',
+              isSelected ? 'bg-blue-500/30 text-blue-700 dark:text-blue-300' : 'bg-theme-elevated',
+              count < 1000 ? 'w-8' : 'w-9'
+            )}>
+              {count}
+            </span>
+          )}
+        </div>
       </button>
     )
   }

package/src/components/resources/renderers/HPARenderer.tsx

@@ -1,6 +1,7 @@
 import { Cpu, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import { formatAge } from '../resource-utils'
 
 interface HPARendererProps {
@@ -113,7 +114,7 @@ export function HPARenderer({ data, onNavigate }: HPARendererProps) {
             spec.scaleTargetRef?.name ? (
               <ResourceLink
                 name={spec.scaleTargetRef.name}
-                kind={(spec.scaleTargetRef.kind || 'Deployment').toLowerCase() + 's'}
+                kind={kindToPlural(spec.scaleTargetRef.kind || 'Deployment')}
                 namespace={data.metadata?.namespace || ''}
                 label={`${spec.scaleTargetRef.kind}/${spec.scaleTargetRef.name}`}
                 onNavigate={onNavigate}

package/src/components/resources/renderers/KarpenterNodeClaimRenderer.tsx

@@ -1,6 +1,7 @@
 import { Server, Cpu, Settings } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import {
   getNodeClaimStatus,
   getNodeClaimInstanceType,
@@ -73,7 +74,7 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
               value={nodeClassRef.name ? (
                 <ResourceLink
                   name={nodeClassRef.name}
-                  kind={(nodeClassRef.kind || 'EC2NodeClass').toLowerCase() + 's'}
+                  kind={kindToPlural(nodeClassRef.kind || 'EC2NodeClass')}
                   namespace=""
                   group={nodeClassRef.group}
                   label={`${nodeClassRef.kind || 'EC2NodeClass'}/${nodeClassRef.name}`}

package/src/components/resources/renderers/KarpenterNodePoolRenderer.tsx

@@ -1,5 +1,6 @@
 import { Server, Settings, Shield, Cpu, Tag } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import {
   getNodePoolStatus,
   getNodePoolNodeClassRef,
@@ -47,7 +48,7 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
             value={nodeClassRef?.name ? (
               <ResourceLink
                 name={nodeClassRef.name}
-                kind={(nodeClassRef.kind || 'EC2NodeClass').toLowerCase() + 's'}
+                kind={kindToPlural(nodeClassRef.kind || 'EC2NodeClass')}
                 namespace=""
                 group={nodeClassRef.group}
                 label={getNodePoolNodeClassRef(data)}

package/src/components/resources/renderers/KedaScaledObjectRenderer.tsx

@@ -1,5 +1,6 @@
 import { Cpu } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import {
   getScaledObjectStatus,
   getScaledObjectTarget,
@@ -66,7 +67,7 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
               return (
                 <ResourceLink
                   name={target.name}
-                  kind={(target.kind || 'Deployment').toLowerCase() + 's'}
+                  kind={kindToPlural(target.kind || 'Deployment')}
                   namespace={data.metadata?.namespace || ''}
                   label={getScaledObjectTarget(data)}
                   onNavigate={onNavigate}

package/src/components/resources/renderers/KnativeEventingRenderer.tsx

@@ -1,6 +1,7 @@
 import { Radio, Filter, FileType, Inbox, ArrowRightLeft } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
 interface RendererProps {
@@ -48,7 +49,7 @@ export function BrokerRenderer({ data, onNavigate }: RendererProps) {
               <Property label="Dead Letter" value={
                 <ResourceLink
                   name={delivery.deadLetterSink.ref.name}
-                  kind={delivery.deadLetterSink.ref.kind?.toLowerCase() + 's'}
+                  kind={kindToPlural(delivery.deadLetterSink.ref.kind || 'Service')}
                   namespace={delivery.deadLetterSink.ref.namespace || ns}
                   onNavigate={onNavigate}
                 />
@@ -106,7 +107,7 @@ export function TriggerRenderer({ data, onNavigate }: RendererProps) {
             subscriberRef ? (
               <ResourceLink
                 name={subscriberRef.name}
-                kind={(subscriberRef.kind?.toLowerCase() || 'services') + (subscriberRef.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                kind={kindToPlural(subscriberRef.kind || 'Service')}
                 namespace={subscriberRef.namespace || ns}
                 onNavigate={onNavigate}
               />
@@ -248,7 +249,7 @@ export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
             <Property label="Channel" value={
               <ResourceLink
                 name={channelRef.name}
-                kind={(channelRef.kind?.toLowerCase() || 'channels') + (channelRef.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                kind={kindToPlural(channelRef.kind || 'Channel')}
                 namespace={ns}
                 onNavigate={onNavigate}
               />
@@ -258,7 +259,7 @@ export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
             subscriberRef ? (
               <ResourceLink
                 name={subscriberRef.name}
-                kind={(subscriberRef.kind?.toLowerCase() || 'services') + (subscriberRef.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                kind={kindToPlural(subscriberRef.kind || 'Service')}
                 namespace={subscriberRef.namespace || ns}
                 onNavigate={onNavigate}
               />
@@ -270,7 +271,7 @@ export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
             replyRef ? (
               <ResourceLink
                 name={replyRef.name}
-                kind={(replyRef.kind?.toLowerCase() || 'channels') + (replyRef.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                kind={kindToPlural(replyRef.kind || 'Channel')}
                 namespace={replyRef.namespace || ns}
                 onNavigate={onNavigate}
               />
@@ -288,7 +289,7 @@ export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
               <Property label="Sink" value={
                 <ResourceLink
                   name={delivery.deadLetterSink.ref.name}
-                  kind={(delivery.deadLetterSink.ref.kind?.toLowerCase() || 'services') + 's'}
+                  kind={kindToPlural(delivery.deadLetterSink.ref.kind || 'Service')}
                   namespace={delivery.deadLetterSink.ref.namespace || ns}
                   onNavigate={onNavigate}
                 />

package/src/components/resources/renderers/KnativeFlowRenderer.tsx

@@ -1,6 +1,7 @@
 import { ListOrdered, GitFork } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
 interface RendererProps {
@@ -15,7 +16,7 @@ function RefDisplay({ ref: destRef, ns, onNavigate }: { ref: any; ns: string; on
     return (
       <ResourceLink
         name={destRef.ref.name}
-        kind={(destRef.ref.kind?.toLowerCase() || 'services') + (destRef.ref.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+        kind={kindToPlural(destRef.ref.kind || 'Service')}
         namespace={destRef.ref.namespace || ns}
         onNavigate={onNavigate}
       />

package/src/components/resources/renderers/KnativeNetworkingRenderer.tsx

@@ -1,6 +1,7 @@
 import { Network, ShieldCheck, Server, Globe } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
 interface RendererProps {
@@ -169,7 +170,7 @@ export function ServerlessServiceRenderer({ data, onNavigate }: RendererProps) {
             <Property label="Target" value={
               <ResourceLink
                 name={objectRef.name}
-                kind={(objectRef.kind?.toLowerCase() || 'deployments') + 's'}
+                kind={kindToPlural(objectRef.kind || 'Deployment')}
                 namespace={ns}
                 onNavigate={onNavigate}
               />
@@ -216,7 +217,7 @@ export function DomainMappingRenderer({ data, onNavigate }: RendererProps) {
             <Property label="Target" value={
               <ResourceLink
                 name={ref.name}
-                kind={(ref.kind?.toLowerCase() || 'services') + (ref.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                kind={kindToPlural(ref.kind || 'Service')}
                 namespace={ns}
                 onNavigate={onNavigate}
               />

package/src/components/resources/renderers/KnativeSourceRenderer.tsx

@@ -1,6 +1,7 @@
 import { Clock, Server, Container, Link2 } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
 interface RendererProps {
@@ -16,7 +17,7 @@ function SinkProperty({ sink, ns, onNavigate }: { sink: any; ns: string; onNavig
       <Property label="Sink" value={
         <ResourceLink
           name={sink.ref.name}
-          kind={(sink.ref.kind?.toLowerCase() || 'services') + (sink.ref.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+          kind={kindToPlural(sink.ref.kind || 'Service')}
           namespace={sink.ref.namespace || ns}
           onNavigate={onNavigate}
         />
@@ -195,7 +196,7 @@ export function SinkBindingRenderer({ data, onNavigate }: RendererProps) {
                 <Property label="Subject" value={
                   <ResourceLink
                     name={subjectRef.name}
-                    kind={(subjectRef.kind?.toLowerCase() || 'deployments') + 's'}
+                    kind={kindToPlural(subjectRef.kind || 'Deployment')}
                     namespace={subjectRef.namespace || ns}
                     onNavigate={onNavigate}
                   />

package/src/components/resources/renderers/VPARenderer.tsx

@@ -1,6 +1,7 @@
 import { Cpu } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 
 interface VPARendererProps {
   data: any
@@ -65,7 +66,7 @@ export function VPARenderer({ data, onNavigate }: VPARendererProps) {
             targetRef.name ? (
               <ResourceLink
                 name={targetRef.name}
-                kind={(targetRef.kind || 'Deployment').toLowerCase() + 's'}
+                kind={kindToPlural(targetRef.kind || 'Deployment')}
                 namespace={data.metadata?.namespace || ''}
                 label={`${targetRef.kind}/${targetRef.name}`}
                 onNavigate={onNavigate}

package/src/components/resources/renderers/WorkloadRenderer.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Server, ExternalLink, Scale, Minus, Plus, Loader2 } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { DialogPortal } from '../../ui/DialogPortal'
 
 interface WorkloadRendererProps {
   kind: string
@@ -213,67 +214,64 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
       </Section>
 
       {/* Scale Dialog */}
-      {showScaleDialog && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="bg-theme-surface border border-theme-border rounded-lg shadow-xl w-80 p-4">
-            <h3 className="text-sm font-medium text-theme-text-primary mb-4">
-              Scale {metadata.name}
-            </h3>
+      <DialogPortal open={showScaleDialog} onClose={() => setShowScaleDialog(false)} className="w-80 p-4">
+        <h3 className="text-sm font-medium text-theme-text-primary mb-4">
+          Scale {metadata.name}
+        </h3>
 
-            <div className="flex items-center justify-center gap-4 mb-4">
-              <button
-                onClick={() => setTargetReplicas(Math.max(0, targetReplicas - 1))}
-                className="p-2 rounded-lg bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
-                disabled={targetReplicas <= 0}
-              >
-                <Minus className="w-5 h-5" />
-              </button>
+        <div className="flex items-center justify-center gap-4 mb-4">
+          <button
+            onClick={() => setTargetReplicas(Math.max(0, targetReplicas - 1))}
+            className="p-2 rounded-lg bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+            disabled={targetReplicas <= 0}
+          >
+            <Minus className="w-5 h-5" />
+          </button>
 
-              <input
-                type="number"
-                min="0"
-                max="10000"
-                value={targetReplicas}
-                onChange={(e) => setTargetReplicas(Math.min(10000, Math.max(0, parseInt(e.target.value) || 0)))}
-                className="w-20 text-center text-2xl font-semibold bg-theme-elevated border border-theme-border rounded-lg py-2 text-theme-text-primary focus:outline-none focus:border-blue-500"
-              />
+          <input
+            type="number"
+            min="0"
+            max="10000"
+            value={targetReplicas}
+            onChange={(e) => setTargetReplicas(Math.min(10000, Math.max(0, parseInt(e.target.value) || 0)))}
+            className="w-20 text-center text-2xl font-semibold bg-theme-elevated border border-theme-border rounded-lg py-2 text-theme-text-primary focus:outline-none focus:border-blue-500"
+            autoFocus
+          />
 
-              <button
-                onClick={() => setTargetReplicas(Math.min(10000, targetReplicas + 1))}
-                disabled={targetReplicas >= 10000}
-                className="p-2 rounded-lg bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                <Plus className="w-5 h-5" />
-              </button>
-            </div>
+          <button
+            onClick={() => setTargetReplicas(Math.min(10000, targetReplicas + 1))}
+            disabled={targetReplicas >= 10000}
+            className="p-2 rounded-lg bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <Plus className="w-5 h-5" />
+          </button>
+        </div>
 
-            <div className="text-xs text-theme-text-tertiary text-center mb-4">
-              Current: {spec.replicas || 0} replicas
-              {targetReplicas !== (spec.replicas || 0) && (
-                <span className="text-theme-text-secondary">
-                  {' '}→ {targetReplicas}
-                </span>
-              )}
-            </div>
+        <div className="text-xs text-theme-text-tertiary text-center mb-4">
+          Current: {spec.replicas || 0} replicas
+          {targetReplicas !== (spec.replicas || 0) && (
+            <span className="text-theme-text-secondary">
+              {' '}→ {targetReplicas}
+            </span>
+          )}
+        </div>
 
-            <div className="flex gap-2">
-              <button
-                onClick={() => setShowScaleDialog(false)}
-                className="flex-1 px-3 py-2 text-sm text-theme-text-secondary hover:text-theme-text-primary bg-theme-elevated hover:bg-theme-hover border border-theme-border rounded-lg transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleScale}
-                disabled={isScalePending || targetReplicas === (spec.replicas || 0)}
-                className="flex-1 px-3 py-2 text-sm text-white bg-blue-600 hover:bg-blue-500 disabled:bg-blue-600/50 disabled:cursor-not-allowed rounded-lg transition-colors"
-              >
-                {isScalePending ? 'Scaling...' : 'Apply'}
-              </button>
-            </div>
-          </div>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setShowScaleDialog(false)}
+            className="flex-1 px-3 py-2 text-sm text-theme-text-secondary hover:text-theme-text-primary bg-theme-elevated hover:bg-theme-hover border border-theme-border rounded-lg transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleScale}
+            disabled={isScalePending || targetReplicas === (spec.replicas || 0)}
+            className="flex-1 px-3 py-2 text-sm text-white bg-blue-600 hover:bg-blue-500 disabled:bg-blue-600/50 disabled:cursor-not-allowed rounded-lg transition-colors"
+          >
+            {isScalePending ? 'Scaling...' : 'Apply'}
+          </button>
         </div>
-      )}
+      </DialogPortal>
 
       <Section title="Strategy">
         <PropertyList>