@skyhook-io/k8s-ui 1.7.8 → 1.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.7.8",
+  "version": "1.7.9",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/issues/IssuesView.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, type ReactNode } from 'react';
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
 import { ChevronRight, CircleCheck, Clock, ExternalLink } from 'lucide-react';
 import { ClusterName, EmptyState } from '../ui';
 import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format';
@@ -108,9 +108,24 @@ function IssueRow({
   const cluster = clusterLabel?.(issue);
   const affected = affectedSummary(issue.affected);
   const { headline } = issueMessageParts(issue);
+  const [renderDetails, setRenderDetails] = useState(open);
+
+  useEffect(() => {
+    if (open) {
+      setRenderDetails(true);
+      return;
+    }
+    if (!renderDetails) return;
+
+    const timeout = window.setTimeout(() => setRenderDetails(false), 200);
+    return () => window.clearTimeout(timeout);
+  }, [open, renderDetails]);
 
   return (
-    <li className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm">
+    <li
+      className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm"
+      style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 72px' }}
+    >
       {/* The whole header is the single toggle target — chevron is just the
           open/closed indicator, not a separate action. Deep-links live in the
           expanded body (a link nested in a button would be invalid). */}
@@ -187,20 +202,27 @@ function IssueRow({
         </span>
       </div>
 
-      <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: open ? '1fr' : '0fr' }}>
-        {/* Kept mounted (not `open &&`) so the grid-rows transition animates the
-            collapse too; inert when closed so SR + tab skip the clipped content. */}
-        <div className="overflow-hidden" inert={!open || undefined}>
-          <div className="border-t border-theme-border bg-theme-base/40 px-4 py-4 pl-11">
-            <div className="flex flex-col gap-4">
-              <Diagnosis issue={issue} />
-              <div className="border-t border-theme-border/70 pt-3">
-                <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
+      {renderDetails ? (
+        <div
+          className={`issue-details-motion ${open ? 'issue-details-motion-open' : ''}`}
+          onTransitionEnd={(event) => {
+            if (event.target !== event.currentTarget) return;
+            if (event.propertyName !== 'grid-template-rows') return;
+            if (!open) setRenderDetails(false);
+          }}
+        >
+          <div className="overflow-hidden">
+            <div className="border-t border-theme-border bg-theme-base/40 px-4 py-4 pl-11">
+              <div className="flex flex-col gap-4">
+                <Diagnosis issue={issue} />
+                <div className="border-t border-theme-border/70 pt-3">
+                  <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      ) : null}
     </li>
   );
 }

package/src/theme/components.css

@@ -126,6 +126,25 @@
     padding: 0.75rem;
   }
 
+  /* ── ISSUE ROW DETAILS ── */
+
+  .issue-details-motion {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    transition: grid-template-rows 200ms ease-out;
+  }
+
+  .issue-details-motion-open {
+    grid-template-rows: 1fr;
+  }
+
+  @starting-style {
+    .issue-details-motion-open {
+      grid-template-rows: 0fr;
+    }
+  }
+
   /* ── SUBTLE BORDERS ── */
 
   .table-divide-subtle > * + * {