From 7cc3159ff38dd65244b711aeb20c2e64e4ddc60b Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Thu, 30 Oct 2025 09:55:01 +0100
Subject: [PATCH 1/8] feat: wip

---
 .../_components/stack-collapsible.tsx         |  2 +-
 src/components/CollapsibleCard.tsx            | 10 +--
 .../runs/detail-tabs/Stack/index.tsx          |  9 +-
 .../stacks/info/ComponentCollapsible.tsx      | 73 ----------------
 src/components/stacks/info/StackHeader.tsx    | 33 -------
 src/components/stacks/info/index.tsx          | 41 +++------
 src/components/stacks/info/sort-component.ts  | 16 ++++
 .../stacks/info/stack-info-collapsible.tsx    | 25 ++++++
 .../info/stack-info-component-collapsible.tsx | 87 +++++++++++++++++++
 src/components/stacks/stack-tag.tsx           | 22 +++++
 src/components/steps/step-sheet/StacksTab.tsx |  4 +-
 11 files changed, 176 insertions(+), 146 deletions(-)
 delete mode 100644 src/components/stacks/info/ComponentCollapsible.tsx
 delete mode 100644 src/components/stacks/info/StackHeader.tsx
 create mode 100644 src/components/stacks/info/sort-component.ts
 create mode 100644 src/components/stacks/info/stack-info-collapsible.tsx
 create mode 100644 src/components/stacks/info/stack-info-component-collapsible.tsx
 create mode 100644 src/components/stacks/stack-tag.tsx

diff --git a/src/app/deployments/[deploymentId]/_components/stack-collapsible.tsx b/src/app/deployments/[deploymentId]/_components/stack-collapsible.tsx
index e738b0907..9a8dcce5e 100644
--- a/src/app/deployments/[deploymentId]/_components/stack-collapsible.tsx
+++ b/src/app/deployments/[deploymentId]/_components/stack-collapsible.tsx
@@ -91,7 +91,7 @@ function DeploymentStackCollapsibleStackSection({
 
 	const snapshotConfig = snapshot.metadata?.pipeline_configuration.settings || {};
 
-	return <StackInfo displayInfoBox={false} stack={stack} objectConfig={snapshotConfig} />;
+	return <StackInfo stack={stack} objectConfig={snapshotConfig} />;
 }
 
 function StackCollapsibleEmptyState({ title, subtitle }: { title: string; subtitle?: string }) {
diff --git a/src/components/CollapsibleCard.tsx b/src/components/CollapsibleCard.tsx
index 743c63d00..b9d299048 100644
--- a/src/components/CollapsibleCard.tsx
+++ b/src/components/CollapsibleCard.tsx
@@ -1,4 +1,3 @@
-import ChevronDown from "@/assets/icons/chevron-down.svg?react";
 import {
 	CollapsibleContent,
 	CollapsibleHeader,
@@ -8,6 +7,7 @@ import {
 } from "@zenml-io/react-component-library";
 import { cn } from "@zenml-io/react-component-library/utilities";
 import { useState } from "react";
+import { CollapsibleChevron } from "./collapsible-chevron";
 import { CopyMetadataButton } from "./copy-metadata-button";
 
 type CollapsibleCardProps = {
@@ -35,12 +35,8 @@ export function CollapsibleCard({
 	return (
 		<CollapsiblePanel className={className} open={open} onOpenChange={setOpen}>
 			<CollapsibleHeader intent={intent} className={headerClassName}>
-				<CollapsibleTrigger className="flex w-full items-center gap-[10px]">
-					<ChevronDown
-						className={` ${
-							open ? "" : "-rotate-90"
-						} h-5 w-5 rounded-md fill-neutral-500 transition-transform duration-200 hover:bg-neutral-200`}
-					/>
+				<CollapsibleTrigger className="flex flex-1 items-center gap-[10px]">
+					<CollapsibleChevron open={open} />
 					{title}
 				</CollapsibleTrigger>
 
diff --git a/src/components/runs/detail-tabs/Stack/index.tsx b/src/components/runs/detail-tabs/Stack/index.tsx
index 10bd71a99..90380e41e 100644
--- a/src/components/runs/detail-tabs/Stack/index.tsx
+++ b/src/components/runs/detail-tabs/Stack/index.tsx
@@ -1,6 +1,7 @@
 import AlertCircle from "@/assets/icons/alert-circle.svg?react";
 import { EmptyState } from "@/components/EmptyState";
 import { StackInfo } from "@/components/stacks/info";
+import { StackInfoCollapsible } from "@/components/stacks/info/stack-info-collapsible";
 import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
 import { useStack } from "@/data/stacks/stack-detail-query";
 import { PipelineRun } from "@/types/pipeline-runs";
@@ -46,7 +47,11 @@ function StackTabContent({ stackId, run }: StackTabContentProps) {
 		return <p>Failed to fetch Stack</p>;
 	}
 
-	const config = (run.metadata?.config.settings as { [key: string]: any } | undefined) || {};
+	const config = run.metadata?.config.settings || {};
 
-	return <StackInfo stack={data} objectConfig={config} />;
+	return (
+		<StackInfoCollapsible stackName={data.name}>
+			<StackInfo stack={data} objectConfig={config} />
+		</StackInfoCollapsible>
+	);
 }
diff --git a/src/components/stacks/info/ComponentCollapsible.tsx b/src/components/stacks/info/ComponentCollapsible.tsx
deleted file mode 100644
index 4f88b7e24..000000000
--- a/src/components/stacks/info/ComponentCollapsible.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { snakeCaseToTitleCase } from "@/lib/strings";
-import { sanitizeUrl } from "@/lib/url";
-import { routes } from "@/router/routes";
-import { StackComponent } from "@/types/components";
-import { Box, Button } from "@zenml-io/react-component-library/components/server";
-import { Link } from "react-router-dom";
-import { NestedCollapsible } from "../../NestedCollapsible";
-import { ComponentBadge } from "../../stack-components/ComponentBadge";
-
-type Props = {
-	component: StackComponent;
-	objectConfig: Record<string, any>;
-};
-export function ComponentCollapsible({ component, objectConfig }: Props) {
-	const keyName = `${component.body?.type}.${component.body?.flavor_name}`;
-	const settings = objectConfig?.[keyName] ?? undefined;
-
-	if (!settings || Object.keys(settings).length === 0) {
-		return (
-			<Link to={routes.components.detail(component.id)}>
-				<Box className="flex w-full items-center justify-between gap-3 px-5 py-3 text-left">
-					<ComponentCollapsibleItem component={component} />
-				</Box>
-			</Link>
-		);
-	}
-
-	return (
-		<NestedCollapsible
-			intent="primary"
-			contentClassName="pl-[60px]"
-			className="w-full"
-			isInitialOpen={false}
-			title={
-				<div className="flex w-full items-center justify-between gap-3 text-left">
-					<ComponentCollapsibleItem component={component} />
-				</div>
-			}
-			data={settings}
-		>
-			<Button
-				asChild
-				intent="secondary"
-				emphasis="subtle"
-				className="mx-auto flex w-fit justify-center text-text-sm text-theme-text-secondary"
-			>
-				<Link to={routes.components.detail(component.id)}>See Component Details</Link>
-			</Button>
-		</NestedCollapsible>
-	);
-}
-
-export function ComponentCollapsibleItem({ component }: { component: StackComponent }) {
-	return (
-		<>
-			<div className="flex items-center gap-2">
-				<img
-					width={32}
-					height={32}
-					alt={`${component.body?.flavor_name} logo`}
-					src={sanitizeUrl(component.body?.logo_url || "")}
-				/>
-				<div>
-					<p className="text-text-lg">{component.name}</p>
-					<p className="text-text-sm text-theme-text-secondary">{component.id.split("-")[0]}</p>
-				</div>
-			</div>
-			<ComponentBadge type={component.body?.type || "orchestrator"}>
-				{snakeCaseToTitleCase(component.body?.type || "")}
-			</ComponentBadge>
-		</>
-	);
-}
diff --git a/src/components/stacks/info/StackHeader.tsx b/src/components/stacks/info/StackHeader.tsx
deleted file mode 100644
index b9157162d..000000000
--- a/src/components/stacks/info/StackHeader.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Stack } from "@/types/stack";
-import StackIcon from "@/assets/icons/stack.svg?react";
-import { Avatar, AvatarFallback } from "@zenml-io/react-component-library/components/client";
-import { Box, Tag } from "@zenml-io/react-component-library/components/server";
-
-type Props = {
-	stack: Stack;
-};
-
-export function StackHeader({ stack }: Props) {
-	return (
-		<Box className="flex items-center justify-between gap-3 px-5 py-3">
-			<div className="flex items-center gap-2">
-				<Avatar type="square" size="md">
-					<AvatarFallback size="md">{stack.name[0]}</AvatarFallback>
-				</Avatar>
-				<div>
-					<p className="text-text-lg">{stack.name}</p>
-					<p className="text-text-sm text-theme-text-secondary">{stack.id.split("-")[0]}</p>
-				</div>
-			</div>
-			<Tag
-				rounded={false}
-				className="inline-flex shrink items-center gap-0.5 truncate"
-				color="turquoise"
-				emphasis="subtle"
-			>
-				<StackIcon className="h-4 w-4 shrink-0 fill-current" />
-				<div className="truncate">Stack</div>
-			</Tag>
-		</Box>
-	);
-}
diff --git a/src/components/stacks/info/index.tsx b/src/components/stacks/info/index.tsx
index ac272147b..b66239a84 100644
--- a/src/components/stacks/info/index.tsx
+++ b/src/components/stacks/info/index.tsx
@@ -1,38 +1,23 @@
 import { Stack, StackComponentsList } from "@/types/stack";
-import { InfoBox } from "../../Infobox";
-import { ComponentCollapsible } from "./ComponentCollapsible";
-import { StackHeader } from "./StackHeader";
+import { StackInfoComponentCollapsible } from "./stack-info-component-collapsible";
+import { sortComponents } from "./sort-component";
 
 type Props = {
 	stack: Stack;
-	displayInfoBox?: boolean;
-	objectConfig: Record<string, any>;
+	objectConfig: Record<string, unknown>;
 };
-export function StackInfo({ stack, objectConfig, displayInfoBox = true }: Props) {
-	const allComponents = Object.values(
-		(stack.metadata?.components as StackComponentsList) || {}
-	).flat();
-	return (
-		<div className="space-y-5">
-			{displayInfoBox && <StackInfobox />}
-			<StackHeader stack={stack} />
-			<ul className="space-y-5">
-				{allComponents.map((component) => (
-					<li key={component.id} className="w-full">
-						<ComponentCollapsible component={component} objectConfig={objectConfig} />
-					</li>
-				))}
-			</ul>
-		</div>
+export function StackInfo({ stack, objectConfig }: Props) {
+	const allComponents = sortComponents(
+		Object.values((stack.metadata?.components as StackComponentsList) || {}).flat()
 	);
-}
 
-function StackInfobox() {
 	return (
-		<InfoBox className="truncate">
-			<p className="truncate">
-				Current run-specific stack settings. Click on a component for full default settings.
-			</p>
-		</InfoBox>
+		<ul className="space-y-5">
+			{allComponents.map((component) => (
+				<li key={component.id} className="w-full">
+					<StackInfoComponentCollapsible component={component} objectConfig={objectConfig} />
+				</li>
+			))}
+		</ul>
 	);
 }
diff --git a/src/components/stacks/info/sort-component.ts b/src/components/stacks/info/sort-component.ts
new file mode 100644
index 000000000..60acd0240
--- /dev/null
+++ b/src/components/stacks/info/sort-component.ts
@@ -0,0 +1,16 @@
+import { StackComponent } from "@/types/components";
+import { StackComponentType } from "@/types/components";
+import { stackComponentTypes } from "@/lib/constants";
+
+export function sortComponents(components: StackComponent[]) {
+	return components.sort((a, b) => {
+		const typeA = a.body?.type ?? "";
+		const typeB = b.body?.type ?? "";
+		const indexA = stackComponentTypes.indexOf(typeA as StackComponentType);
+		const indexB = stackComponentTypes.indexOf(typeB as StackComponentType);
+		// If type not found in array, put it at the end
+		const orderA = indexA === -1 ? stackComponentTypes.length : indexA;
+		const orderB = indexB === -1 ? stackComponentTypes.length : indexB;
+		return orderA - orderB;
+	});
+}
diff --git a/src/components/stacks/info/stack-info-collapsible.tsx b/src/components/stacks/info/stack-info-collapsible.tsx
new file mode 100644
index 000000000..3feb7f720
--- /dev/null
+++ b/src/components/stacks/info/stack-info-collapsible.tsx
@@ -0,0 +1,25 @@
+import { CollapsibleCard } from "@/components/CollapsibleCard";
+import { PropsWithChildren, ReactNode } from "react";
+import { StackTag } from "../stack-tag";
+
+type Props = {
+	stackName: string;
+	title?: ReactNode;
+};
+
+export function StackInfoCollapsible({
+	children,
+	stackName,
+	title = "Stack"
+}: PropsWithChildren<Props>) {
+	return (
+		<CollapsibleCard
+			title={title}
+			initialOpen={true}
+			headerClassName="flex items-center gap-1 flex-wrap"
+			headerChildren={<StackTag stackName={stackName} />}
+		>
+			{children}
+		</CollapsibleCard>
+	);
+}
diff --git a/src/components/stacks/info/stack-info-component-collapsible.tsx b/src/components/stacks/info/stack-info-component-collapsible.tsx
new file mode 100644
index 000000000..c7fef9dd8
--- /dev/null
+++ b/src/components/stacks/info/stack-info-component-collapsible.tsx
@@ -0,0 +1,87 @@
+import { ComponentIcon } from "@/components/ComponentIcon";
+import { snakeCaseToTitleCase } from "@/lib/strings";
+import { isObject } from "@/lib/type-guards";
+import { sanitizeUrl } from "@/lib/url";
+import { routes } from "@/router/routes";
+import { StackComponent, StackComponentType } from "@/types/components";
+import { Box } from "@zenml-io/react-component-library/components/server";
+import { Link } from "react-router-dom";
+import { NestedCollapsible } from "../../NestedCollapsible";
+
+type Props = {
+	component: StackComponent;
+	objectConfig: Record<string, unknown>;
+};
+export function StackInfoComponentCollapsible({ component, objectConfig }: Props) {
+	const keyName = `${component.body?.type}.${component.body?.flavor_name}`;
+	const settings = objectConfig?.[keyName] ?? undefined;
+
+	const isValidObject = isObject(settings);
+
+	if (!isValidObject || Object.keys(settings).length === 0) {
+		return (
+			<Link to={routes.components.detail(component.id)}>
+				<Box className="flex w-full items-center gap-[10px] bg-theme-surface-secondary px-5 py-3 text-left">
+					<div className="size-5 shrink-0" />
+					<ComponentCollapsibleHeader
+						componentLogoUrl={component.body?.logo_url ?? undefined}
+						componentName={component.name}
+						componentType={component.body?.type ?? "orchestrator"}
+					/>
+				</Box>
+			</Link>
+		);
+	}
+
+	return (
+		<NestedCollapsible
+			intent="secondary"
+			contentClassName="pl-[60px]"
+			className="w-full"
+			isInitialOpen={false}
+			title={
+				<div className="flex w-full items-center justify-between gap-3 text-left">
+					<ComponentCollapsibleHeader
+						componentLogoUrl={component.body?.logo_url ?? undefined}
+						componentName={component.name}
+						componentType={component.body?.type ?? "orchestrator"}
+					/>
+				</div>
+			}
+			data={settings as Record<string, unknown>}
+		></NestedCollapsible>
+	);
+}
+
+type ComponentCollapsibleHeaderProps = {
+	componentName: string;
+	componentLogoUrl: string | undefined;
+	componentType: StackComponentType;
+};
+
+function ComponentCollapsibleHeader({
+	componentLogoUrl,
+	componentName,
+	componentType
+}: ComponentCollapsibleHeaderProps) {
+	return (
+		<div className="grid w-full max-w-full grid-cols-3 items-center gap-2">
+			<div className="col-span-1 truncate text-theme-text-secondary">
+				{snakeCaseToTitleCase(componentType)}
+			</div>
+			<div className="col-span-2 flex items-center gap-2">
+				{componentLogoUrl ? (
+					<img
+						width={32}
+						height={32}
+						alt={`${componentName} logo`}
+						src={sanitizeUrl(componentLogoUrl || "")}
+					/>
+				) : (
+					<ComponentIcon type={componentType} />
+				)}
+				<p className="truncate">{componentName}</p>
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/stacks/stack-tag.tsx b/src/components/stacks/stack-tag.tsx
new file mode 100644
index 000000000..2ad2719e4
--- /dev/null
+++ b/src/components/stacks/stack-tag.tsx
@@ -0,0 +1,22 @@
+import { cn, Tag } from "@zenml-io/react-component-library";
+import StackIcon from "@/assets/icons/stack.svg?react";
+import { ComponentProps } from "react";
+
+type Props = ComponentProps<typeof Tag> & {
+	stackName: string;
+};
+
+export function StackTag({ stackName, className, ...props }: Props) {
+	return (
+		<Tag
+			className={cn("flex max-w-full items-center gap-1 text-turquoise-600", className)}
+			color="turquoise"
+			emphasis="subtle"
+			rounded={false}
+			{...props}
+		>
+			<StackIcon className="h-4 w-4 shrink-0 fill-current" />
+			<span className="truncate">{stackName}</span>
+		</Tag>
+	);
+}
diff --git a/src/components/steps/step-sheet/StacksTab.tsx b/src/components/steps/step-sheet/StacksTab.tsx
index 2d9fb73b7..98698da78 100644
--- a/src/components/steps/step-sheet/StacksTab.tsx
+++ b/src/components/steps/step-sheet/StacksTab.tsx
@@ -20,7 +20,7 @@ export function StackTab({ stepId }: Props) {
 	if (run.isError || step.isError) return <p>Something went wrong fetching the run</p>;
 
 	const stackId = run.data?.resources?.stack?.id;
-	const config = (step.data.metadata?.config.settings as { [key: string]: any } | undefined) || {};
+	const config = step.data.metadata?.config.settings || {};
 
 	if (!stackId)
 		return (
@@ -39,7 +39,7 @@ export function StackTab({ stepId }: Props) {
 
 type StackTabContentProps = {
 	stackId: string;
-	objectConfig: Record<string, any>;
+	objectConfig: Record<string, unknown>;
 };
 function StackTabContent({ stackId, objectConfig }: StackTabContentProps) {
 	const { data, isError, isPending } = useStack({ stackId: stackId });

From c3908c0c5d177d1716ec55129fba11d1c06bea9b Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Thu, 30 Oct 2025 13:46:28 +0100
Subject: [PATCH 2/8] feat: more code

---
 .../_components/stack-collapsible.tsx         | 36 +++++-------
 .../_components/snapshot-stack-content.tsx    | 57 -------------------
 .../_components/snapshot-stack.tsx            |  4 +-
 .../runs/detail-tabs/Stack/index.tsx          |  9 +--
 .../stacks/info/stack-info-collapsible.tsx    | 54 ++++++++++++------
 ...tsx => stack-info-component-list-item.tsx} |  2 +-
 ...ndex.tsx => stack-info-component-list.tsx} |  6 +-
 .../stacks/info/stack-info-full.tsx           | 16 ++++++
 src/components/stacks/stack-tag.tsx           | 22 -------
 src/components/steps/step-sheet/StacksTab.tsx |  4 +-
 10 files changed, 78 insertions(+), 132 deletions(-)
 delete mode 100644 src/app/snapshots/[snapshotId]/_components/snapshot-stack-content.tsx
 rename src/components/stacks/info/{stack-info-component-collapsible.tsx => stack-info-component-list-item.tsx} (96%)
 rename src/components/stacks/info/{index.tsx => stack-info-component-list.tsx} (66%)
 create mode 100644 src/components/stacks/info/stack-info-full.tsx
 delete mode 100644 src/components/stacks/stack-tag.tsx

diff --git a/src/app/deployments/[deploymentId]/_components/stack-collapsible.tsx b/src/app/deployments/[deploymentId]/_components/stack-collapsible.tsx
index 9a8dcce5e..c6df4b2b4 100644
--- a/src/app/deployments/[deploymentId]/_components/stack-collapsible.tsx
+++ b/src/app/deployments/[deploymentId]/_components/stack-collapsible.tsx
@@ -1,9 +1,8 @@
 "use client";
 
 import AlertCircle from "@/assets/icons/alert-circle.svg?react";
-import { CollapsibleCard } from "@/components/CollapsibleCard";
 import { EmptyState } from "@/components/EmptyState";
-import { StackInfo } from "@/components/stacks/info";
+import { StackInfoFull } from "@/components/stacks/info/stack-info-full";
 import { pipelineSnapshotQueries } from "@/data/pipeline-snapshots";
 import { useStack } from "@/data/stacks/stack-detail-query";
 import { Deployment } from "@/types/deployments";
@@ -11,21 +10,14 @@ import { PipelineSnapshot } from "@/types/pipeline-snapshots";
 import { useQuery } from "@tanstack/react-query";
 import { Skeleton } from "@zenml-io/react-component-library";
 import { DeploymentDetailWrapper } from "./fetch-wrapper";
+import { CollapsibleCard } from "@/components/CollapsibleCard";
 
 type DeploymentStackCollapsibleContentProps = {
 	deployment: Deployment;
 };
 
 export function DeploymentStackCollapsible() {
-	return <DeploymentDetailWrapper Component={DeploymentStackCollapsibleWrapper} />;
-}
-
-function DeploymentStackCollapsibleWrapper({ deployment }: DeploymentStackCollapsibleContentProps) {
-	return (
-		<CollapsibleCard title="Stack" initialOpen={true}>
-			<DeploymentStackCollapsibleContent deployment={deployment} />
-		</CollapsibleCard>
-	);
+	return <DeploymentDetailWrapper Component={DeploymentStackCollapsibleContent} />;
 }
 
 function DeploymentStackCollapsibleContent({ deployment }: DeploymentStackCollapsibleContentProps) {
@@ -91,20 +83,22 @@ function DeploymentStackCollapsibleStackSection({
 
 	const snapshotConfig = snapshot.metadata?.pipeline_configuration.settings || {};
 
-	return <StackInfo stack={stack} objectConfig={snapshotConfig} />;
+	return <StackInfoFull stack={stack} objectConfig={snapshotConfig} />;
 }
 
 function StackCollapsibleEmptyState({ title, subtitle }: { title: string; subtitle?: string }) {
 	return (
-		<EmptyState
-			className="p-5"
-			icon={<AlertCircle className="h-[60px] w-[60px] fill-neutral-300" />}
-		>
-			<div className="text-center">
-				<p className="text-text-lg font-semibold">{title}</p>
-				{subtitle && <p className="text-text-md text-theme-text-secondary">{subtitle}</p>}
-			</div>
-		</EmptyState>
+		<CollapsibleCard title="Stack" initialOpen={true}>
+			<EmptyState
+				className="p-5"
+				icon={<AlertCircle className="h-[60px] w-[60px] fill-neutral-300" />}
+			>
+				<div className="text-center">
+					<p className="text-text-lg font-semibold">{title}</p>
+					{subtitle && <p className="text-text-md text-theme-text-secondary">{subtitle}</p>}
+				</div>
+			</EmptyState>
+		</CollapsibleCard>
 	);
 }
 
diff --git a/src/app/snapshots/[snapshotId]/_components/snapshot-stack-content.tsx b/src/app/snapshots/[snapshotId]/_components/snapshot-stack-content.tsx
deleted file mode 100644
index fb84119da..000000000
--- a/src/app/snapshots/[snapshotId]/_components/snapshot-stack-content.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import StackIcon from "@/assets/icons/stack.svg?react";
-import { CollapsibleChevron } from "@/components/collapsible-chevron";
-import { ComponentCollapsible } from "@/components/stacks/info/ComponentCollapsible";
-import { Stack, StackComponentsList } from "@/types/stack";
-import {
-	CollapsibleContent,
-	CollapsibleHeader,
-	CollapsiblePanel,
-	CollapsibleTrigger,
-	Tag
-} from "@zenml-io/react-component-library";
-import { useState } from "react";
-
-type Props = {
-	stack: Stack;
-};
-
-export function StackContent({ stack }: Props) {
-	const [open, setOpen] = useState(true);
-
-	const stackName = stack.name;
-
-	const components = Object.values(
-		(stack.metadata?.components as StackComponentsList) ?? {}
-	).flat();
-
-	return (
-		<CollapsiblePanel open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader className="flex items-center justify-between">
-				<CollapsibleTrigger className="flex w-full gap-2">
-					<CollapsibleChevron open={open} />
-					Stack
-				</CollapsibleTrigger>
-				<div>
-					<Tag
-						className="flex w-fit items-center gap-1 whitespace-nowrap text-turquoise-600"
-						color="turquoise"
-						emphasis="subtle"
-						rounded={false}
-					>
-						<StackIcon className="h-4 w-4 fill-current" />
-						{stackName}
-					</Tag>
-				</div>
-			</CollapsibleHeader>
-			<CollapsibleContent className="border-t border-theme-border-moderate bg-theme-surface-primary px-5 py-3">
-				<ul className="space-y-5">
-					{components.map((c) => (
-						<li key={c.id} className="w-full">
-							<ComponentCollapsible component={c} objectConfig={{}} />
-						</li>
-					))}
-				</ul>
-			</CollapsibleContent>
-		</CollapsiblePanel>
-	);
-}
diff --git a/src/app/snapshots/[snapshotId]/_components/snapshot-stack.tsx b/src/app/snapshots/[snapshotId]/_components/snapshot-stack.tsx
index a47636546..135afb788 100644
--- a/src/app/snapshots/[snapshotId]/_components/snapshot-stack.tsx
+++ b/src/app/snapshots/[snapshotId]/_components/snapshot-stack.tsx
@@ -1,9 +1,9 @@
+import { StackInfoFull } from "@/components/stacks/info/stack-info-full";
 import { pipelineSnapshotQueries } from "@/data/pipeline-snapshots";
 import { stackQueries } from "@/data/stacks";
 import { useQuery } from "@tanstack/react-query";
 import { Skeleton } from "@zenml-io/react-component-library/components/server";
 import { useParams } from "react-router-dom";
-import { StackContent } from "./snapshot-stack-content";
 
 export function SnapshotStack() {
 	const { snapshotId } = useParams() as {
@@ -39,5 +39,5 @@ export function SnapshotStack() {
 		return <div>Failed to load stack.</div>;
 	}
 
-	return <StackContent stack={stackQuery.data} />;
+	return <StackInfoFull stack={stackQuery.data} objectConfig={{}} />;
 }
diff --git a/src/components/runs/detail-tabs/Stack/index.tsx b/src/components/runs/detail-tabs/Stack/index.tsx
index 90380e41e..b313a6313 100644
--- a/src/components/runs/detail-tabs/Stack/index.tsx
+++ b/src/components/runs/detail-tabs/Stack/index.tsx
@@ -1,7 +1,6 @@
 import AlertCircle from "@/assets/icons/alert-circle.svg?react";
 import { EmptyState } from "@/components/EmptyState";
-import { StackInfo } from "@/components/stacks/info";
-import { StackInfoCollapsible } from "@/components/stacks/info/stack-info-collapsible";
+import { StackInfoFull } from "@/components/stacks/info/stack-info-full";
 import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
 import { useStack } from "@/data/stacks/stack-detail-query";
 import { PipelineRun } from "@/types/pipeline-runs";
@@ -49,9 +48,5 @@ function StackTabContent({ stackId, run }: StackTabContentProps) {
 
 	const config = run.metadata?.config.settings || {};
 
-	return (
-		<StackInfoCollapsible stackName={data.name}>
-			<StackInfo stack={data} objectConfig={config} />
-		</StackInfoCollapsible>
-	);
+	return <StackInfoFull stack={data} objectConfig={config} />;
 }
diff --git a/src/components/stacks/info/stack-info-collapsible.tsx b/src/components/stacks/info/stack-info-collapsible.tsx
index 3feb7f720..314d14386 100644
--- a/src/components/stacks/info/stack-info-collapsible.tsx
+++ b/src/components/stacks/info/stack-info-collapsible.tsx
@@ -1,25 +1,45 @@
-import { CollapsibleCard } from "@/components/CollapsibleCard";
-import { PropsWithChildren, ReactNode } from "react";
-import { StackTag } from "../stack-tag";
+import {
+	Avatar,
+	AvatarFallback,
+	CollapsibleContent,
+	CollapsibleHeader,
+	CollapsiblePanel,
+	CollapsibleTrigger
+} from "@zenml-io/react-component-library";
+import { cn } from "@zenml-io/react-component-library/utilities";
+import { PropsWithChildren, useState } from "react";
+import { CollapsibleChevron } from "../../collapsible-chevron";
 
 type Props = {
 	stackName: string;
-	title?: ReactNode;
 };
 
-export function StackInfoCollapsible({
-	children,
-	stackName,
-	title = "Stack"
-}: PropsWithChildren<Props>) {
+export function StackInfoCollapsible({ children, stackName }: PropsWithChildren<Props>) {
+	const [open, setOpen] = useState(true);
 	return (
-		<CollapsibleCard
-			title={title}
-			initialOpen={true}
-			headerClassName="flex items-center gap-1 flex-wrap"
-			headerChildren={<StackTag stackName={stackName} />}
-		>
-			{children}
-		</CollapsibleCard>
+		<CollapsiblePanel open={open} onOpenChange={setOpen}>
+			<CollapsibleHeader className="p-0">
+				<CollapsibleTrigger className="flex w-full items-center gap-2 px-5 py-3">
+					<CollapsibleChevron open={open} />
+					<div className="group/copybutton flex items-center gap-2">
+						<Avatar type="square" size="md">
+							<AvatarFallback size="md">{stackName[0] || "S"}</AvatarFallback>
+						</Avatar>
+						<div className="text-left">
+							<p className="text-text-sm text-theme-text-tertiary">Stack</p>
+							<p className="text-text-lg">{stackName}</p>
+						</div>
+					</div>
+				</CollapsibleTrigger>
+			</CollapsibleHeader>
+
+			<CollapsibleContent
+				className={cn(
+					"space-y-3 border-t border-theme-border-moderate bg-theme-surface-primary px-5 py-3"
+				)}
+			>
+				{children}
+			</CollapsibleContent>
+		</CollapsiblePanel>
 	);
 }
diff --git a/src/components/stacks/info/stack-info-component-collapsible.tsx b/src/components/stacks/info/stack-info-component-list-item.tsx
similarity index 96%
rename from src/components/stacks/info/stack-info-component-collapsible.tsx
rename to src/components/stacks/info/stack-info-component-list-item.tsx
index c7fef9dd8..a6fe51020 100644
--- a/src/components/stacks/info/stack-info-component-collapsible.tsx
+++ b/src/components/stacks/info/stack-info-component-list-item.tsx
@@ -12,7 +12,7 @@ type Props = {
 	component: StackComponent;
 	objectConfig: Record<string, unknown>;
 };
-export function StackInfoComponentCollapsible({ component, objectConfig }: Props) {
+export function StackInfoComponentListItem({ component, objectConfig }: Props) {
 	const keyName = `${component.body?.type}.${component.body?.flavor_name}`;
 	const settings = objectConfig?.[keyName] ?? undefined;
 
diff --git a/src/components/stacks/info/index.tsx b/src/components/stacks/info/stack-info-component-list.tsx
similarity index 66%
rename from src/components/stacks/info/index.tsx
rename to src/components/stacks/info/stack-info-component-list.tsx
index b66239a84..6ee0ff4b8 100644
--- a/src/components/stacks/info/index.tsx
+++ b/src/components/stacks/info/stack-info-component-list.tsx
@@ -1,12 +1,12 @@
 import { Stack, StackComponentsList } from "@/types/stack";
-import { StackInfoComponentCollapsible } from "./stack-info-component-collapsible";
+import { StackInfoComponentListItem } from "./stack-info-component-list-item";
 import { sortComponents } from "./sort-component";
 
 type Props = {
 	stack: Stack;
 	objectConfig: Record<string, unknown>;
 };
-export function StackInfo({ stack, objectConfig }: Props) {
+export function StackInfoComponentList({ stack, objectConfig }: Props) {
 	const allComponents = sortComponents(
 		Object.values((stack.metadata?.components as StackComponentsList) || {}).flat()
 	);
@@ -15,7 +15,7 @@ export function StackInfo({ stack, objectConfig }: Props) {
 		<ul className="space-y-5">
 			{allComponents.map((component) => (
 				<li key={component.id} className="w-full">
-					<StackInfoComponentCollapsible component={component} objectConfig={objectConfig} />
+					<StackInfoComponentListItem component={component} objectConfig={objectConfig} />
 				</li>
 			))}
 		</ul>
diff --git a/src/components/stacks/info/stack-info-full.tsx b/src/components/stacks/info/stack-info-full.tsx
new file mode 100644
index 000000000..e9465157a
--- /dev/null
+++ b/src/components/stacks/info/stack-info-full.tsx
@@ -0,0 +1,16 @@
+import { Stack } from "@/types/stack";
+import { StackInfoCollapsible } from "./stack-info-collapsible";
+import { StackInfoComponentList } from "./stack-info-component-list";
+
+type Props = {
+	stack: Stack;
+	objectConfig: Record<string, unknown>;
+};
+
+export function StackInfoFull({ stack, objectConfig }: Props) {
+	return (
+		<StackInfoCollapsible stackName={stack.name}>
+			<StackInfoComponentList stack={stack} objectConfig={objectConfig} />
+		</StackInfoCollapsible>
+	);
+}
diff --git a/src/components/stacks/stack-tag.tsx b/src/components/stacks/stack-tag.tsx
deleted file mode 100644
index 2ad2719e4..000000000
--- a/src/components/stacks/stack-tag.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { cn, Tag } from "@zenml-io/react-component-library";
-import StackIcon from "@/assets/icons/stack.svg?react";
-import { ComponentProps } from "react";
-
-type Props = ComponentProps<typeof Tag> & {
-	stackName: string;
-};
-
-export function StackTag({ stackName, className, ...props }: Props) {
-	return (
-		<Tag
-			className={cn("flex max-w-full items-center gap-1 text-turquoise-600", className)}
-			color="turquoise"
-			emphasis="subtle"
-			rounded={false}
-			{...props}
-		>
-			<StackIcon className="h-4 w-4 shrink-0 fill-current" />
-			<span className="truncate">{stackName}</span>
-		</Tag>
-	);
-}
diff --git a/src/components/steps/step-sheet/StacksTab.tsx b/src/components/steps/step-sheet/StacksTab.tsx
index 98698da78..3bb5122b2 100644
--- a/src/components/steps/step-sheet/StacksTab.tsx
+++ b/src/components/steps/step-sheet/StacksTab.tsx
@@ -1,5 +1,5 @@
 import AlertCircle from "@/assets/icons/alert-circle.svg?react";
-import { StackInfo } from "@/components/stacks/info";
+import { StackInfoFull } from "@/components/stacks/info/stack-info-full";
 import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
 import { useStack } from "@/data/stacks/stack-detail-query";
 import { useStepDetail } from "@/data/steps/step-detail-query";
@@ -50,5 +50,5 @@ function StackTabContent({ stackId, objectConfig }: StackTabContentProps) {
 		return <p>Failed to fetch Stack</p>;
 	}
 
-	return <StackInfo stack={data} objectConfig={objectConfig} />;
+	return <StackInfoFull stack={data} objectConfig={objectConfig} />;
 }

From 2ee6eee57135960d66ed040079384a39a12a4b0c Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Fri, 31 Oct 2025 09:22:35 +0100
Subject: [PATCH 3/8] style: height

---
 .../deployments/[deploymentId]/_components/code-collapsible.tsx | 2 +-
 .../[deploymentId]/_components/deployment-detail.tsx            | 2 +-
 src/app/deployments/[deploymentId]/_components/endpoint.tsx     | 2 +-
 src/components/stacks/info/stack-info-collapsible.tsx           | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/deployments/[deploymentId]/_components/code-collapsible.tsx b/src/app/deployments/[deploymentId]/_components/code-collapsible.tsx
index e1915d365..82e98251f 100644
--- a/src/app/deployments/[deploymentId]/_components/code-collapsible.tsx
+++ b/src/app/deployments/[deploymentId]/_components/code-collapsible.tsx
@@ -60,7 +60,7 @@ function DeploymentCodeContent({ deployment }: Props) {
 
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader className="flex items-center gap-[10px]">
+			<CollapsibleHeader className="flex h-9 items-center gap-[10px]">
 				<CollapsibleTrigger className="flex w-full gap-2">
 					<CollapsibleChevron open={open} />
 					Invocation
diff --git a/src/app/deployments/[deploymentId]/_components/deployment-detail.tsx b/src/app/deployments/[deploymentId]/_components/deployment-detail.tsx
index 9d80a2162..da186fb57 100644
--- a/src/app/deployments/[deploymentId]/_components/deployment-detail.tsx
+++ b/src/app/deployments/[deploymentId]/_components/deployment-detail.tsx
@@ -35,7 +35,7 @@ function DeploymentDetailContent({ deployment }: Props) {
 
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader className="flex items-center gap-[10px]">
+			<CollapsibleHeader className="flex h-9 items-center gap-[10px]">
 				<CollapsibleTrigger className="flex w-full gap-2">
 					<CollapsibleChevron open={open} />
 					Details
diff --git a/src/app/deployments/[deploymentId]/_components/endpoint.tsx b/src/app/deployments/[deploymentId]/_components/endpoint.tsx
index 94e753a05..4e12657ba 100644
--- a/src/app/deployments/[deploymentId]/_components/endpoint.tsx
+++ b/src/app/deployments/[deploymentId]/_components/endpoint.tsx
@@ -27,7 +27,7 @@ function EndpointCollapsibleContent({ deployment }: Props) {
 
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader className="flex items-center gap-[10px]">
+			<CollapsibleHeader className="flex h-9 items-center gap-[10px]">
 				<CollapsibleTrigger className="flex w-full gap-2">
 					<CollapsibleChevron open={open} />
 					Endpoint
diff --git a/src/components/stacks/info/stack-info-collapsible.tsx b/src/components/stacks/info/stack-info-collapsible.tsx
index 314d14386..b22b34386 100644
--- a/src/components/stacks/info/stack-info-collapsible.tsx
+++ b/src/components/stacks/info/stack-info-collapsible.tsx
@@ -18,7 +18,7 @@ export function StackInfoCollapsible({ children, stackName }: PropsWithChildren<
 	const [open, setOpen] = useState(true);
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader className="p-0">
+			<CollapsibleHeader className="flex h-9 items-center p-0">
 				<CollapsibleTrigger className="flex w-full items-center gap-2 px-5 py-3">
 					<CollapsibleChevron open={open} />
 					<div className="group/copybutton flex items-center gap-2">

From ef40821097ec47c5236ee095058f2f17f9ac52c6 Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Fri, 31 Oct 2025 09:34:40 +0100
Subject: [PATCH 4/8] style: height

---
 .../runs/detail-tabs/Configuration/DockerImageCollapsible.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/runs/detail-tabs/Configuration/DockerImageCollapsible.tsx b/src/components/runs/detail-tabs/Configuration/DockerImageCollapsible.tsx
index 6a3b3f3ec..288c717ab 100644
--- a/src/components/runs/detail-tabs/Configuration/DockerImageCollapsible.tsx
+++ b/src/components/runs/detail-tabs/Configuration/DockerImageCollapsible.tsx
@@ -25,7 +25,7 @@ export function DockerImageCollapsible({ data, displayCopyButton = true }: Props
 
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader intent="primary" className="flex items-center gap-[10px]">
+			<CollapsibleHeader intent="primary" className="flex h-9 items-center gap-[10px]">
 				<CollapsibleTrigger className="flex w-full items-center gap-[10px]">
 					<ChevronDown
 						className={` ${

From a72e276034901830174a497a8530a696f0705ac2 Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Fri, 31 Oct 2025 10:11:47 +0100
Subject: [PATCH 5/8] feat: more code

---
 src/components/CollapsibleCard.tsx            |  7 ++-
 src/components/NestedCollapsible.tsx          |  5 +-
 .../info/stack-info-component-list-item.tsx   | 47 ++++++++++++-------
 3 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/components/CollapsibleCard.tsx b/src/components/CollapsibleCard.tsx
index b9d299048..b0c83d00d 100644
--- a/src/components/CollapsibleCard.tsx
+++ b/src/components/CollapsibleCard.tsx
@@ -55,7 +55,7 @@ export function CollapsibleCard({
 	);
 }
 
-type Props = Omit<CollapsibleCardProps, "headerChildren"> & {
+type Props = CollapsibleCardProps & {
 	copyText: string;
 	displayCopyButton?: boolean;
 };
@@ -65,6 +65,7 @@ export function CollapsibleCardWithCopy({
 	displayCopyButton = true,
 	headerClassName,
 	className,
+	headerChildren,
 	...props
 }: Props) {
 	return (
@@ -76,7 +77,9 @@ export function CollapsibleCardWithCopy({
 				headerClassName
 			)}
 			headerChildren={
-				displayCopyButton ? (
+				headerChildren ? (
+					headerChildren
+				) : displayCopyButton ? (
 					<div className="opacity-100 transition-opacity duration-200 lg:opacity-0 lg:group-hover:opacity-100">
 						<CopyMetadataButton copyText={copyText} />
 					</div>
diff --git a/src/components/NestedCollapsible.tsx b/src/components/NestedCollapsible.tsx
index a9767db64..03d4e031c 100644
--- a/src/components/NestedCollapsible.tsx
+++ b/src/components/NestedCollapsible.tsx
@@ -23,6 +23,7 @@ type Props = {
 	sortKeysAlphabetically?: boolean;
 	className?: string;
 	schema?: JSONSchemaDefinition;
+	headerChildren?: ReactNode;
 };
 
 const regex = /^<class\s+'.*'>$/;
@@ -36,7 +37,8 @@ export function NestedCollapsible({
 	className,
 	children,
 	isInitialOpen = false,
-	sortKeysAlphabetically = true
+	sortKeysAlphabetically = true,
+	headerChildren
 }: PropsWithChildren<Props>) {
 	const objects: { [key: string]: Record<string, unknown> } = {};
 	const nonObjects: { [key: string]: unknown } = {};
@@ -62,6 +64,7 @@ export function NestedCollapsible({
 
 	return (
 		<CollapsibleCardWithCopy
+			headerChildren={headerChildren}
 			contentClassName={contentClassName}
 			initialOpen={isInitialOpen}
 			intent={intent}
diff --git a/src/components/stacks/info/stack-info-component-list-item.tsx b/src/components/stacks/info/stack-info-component-list-item.tsx
index a6fe51020..44236013d 100644
--- a/src/components/stacks/info/stack-info-component-list-item.tsx
+++ b/src/components/stacks/info/stack-info-component-list-item.tsx
@@ -7,6 +7,8 @@ import { StackComponent, StackComponentType } from "@/types/components";
 import { Box } from "@zenml-io/react-component-library/components/server";
 import { Link } from "react-router-dom";
 import { NestedCollapsible } from "../../NestedCollapsible";
+import { CopyMetadataButton } from "@/components/copy-metadata-button";
+import { PropsWithChildren } from "react";
 
 type Props = {
 	component: StackComponent;
@@ -39,13 +41,20 @@ export function StackInfoComponentListItem({ component, objectConfig }: Props) {
 			contentClassName="pl-[60px]"
 			className="w-full"
 			isInitialOpen={false}
-			title={
-				<div className="flex w-full items-center justify-between gap-3 text-left">
+			title={undefined}
+			headerChildren={
+				<div className="relative flex w-full items-center justify-between gap-3 text-left">
 					<ComponentCollapsibleHeader
 						componentLogoUrl={component.body?.logo_url ?? undefined}
 						componentName={component.name}
 						componentType={component.body?.type ?? "orchestrator"}
-					/>
+					>
+						<div className="z-10 opacity-100 transition-opacity duration-200 lg:opacity-0 lg:group-hover:opacity-100">
+							<CopyMetadataButton copyText={JSON.stringify(settings)} />
+						</div>
+					</ComponentCollapsibleHeader>
+
+					<Link className="absolute inset-0" to={routes.components.detail(component.id)} />
 				</div>
 			}
 			data={settings as Record<string, unknown>}
@@ -62,25 +71,29 @@ type ComponentCollapsibleHeaderProps = {
 function ComponentCollapsibleHeader({
 	componentLogoUrl,
 	componentName,
-	componentType
-}: ComponentCollapsibleHeaderProps) {
+	componentType,
+	children
+}: PropsWithChildren<ComponentCollapsibleHeaderProps>) {
 	return (
 		<div className="grid w-full max-w-full grid-cols-3 items-center gap-2">
 			<div className="col-span-1 truncate text-theme-text-secondary">
 				{snakeCaseToTitleCase(componentType)}
 			</div>
-			<div className="col-span-2 flex items-center gap-2">
-				{componentLogoUrl ? (
-					<img
-						width={32}
-						height={32}
-						alt={`${componentName} logo`}
-						src={sanitizeUrl(componentLogoUrl || "")}
-					/>
-				) : (
-					<ComponentIcon type={componentType} />
-				)}
-				<p className="truncate">{componentName}</p>
+			<div className="col-span-2 flex items-center justify-between gap-2">
+				<div className="flex items-center gap-2 overflow-hidden">
+					{componentLogoUrl ? (
+						<img
+							width={32}
+							height={32}
+							alt={`${componentName} logo`}
+							src={sanitizeUrl(componentLogoUrl || "")}
+						/>
+					) : (
+						<ComponentIcon type={componentType} />
+					)}
+					<p className="truncate">{componentName}</p>
+				</div>
+				{children}
 			</div>
 		</div>
 	);

From 9926a6f7f23d6c249bca238d9322882153727e51 Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Fri, 31 Oct 2025 10:12:27 +0100
Subject: [PATCH 6/8] feat: open by default

---
 src/components/stacks/info/stack-info-component-list-item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/stacks/info/stack-info-component-list-item.tsx b/src/components/stacks/info/stack-info-component-list-item.tsx
index 44236013d..b3707bbe7 100644
--- a/src/components/stacks/info/stack-info-component-list-item.tsx
+++ b/src/components/stacks/info/stack-info-component-list-item.tsx
@@ -40,7 +40,7 @@ export function StackInfoComponentListItem({ component, objectConfig }: Props) {
 			intent="secondary"
 			contentClassName="pl-[60px]"
 			className="w-full"
-			isInitialOpen={false}
+			isInitialOpen={true}
 			title={undefined}
 			headerChildren={
 				<div className="relative flex w-full items-center justify-between gap-3 text-left">

From ce21cb7811cdc95fa62d242838398e9eea7c8ced Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Fri, 31 Oct 2025 10:58:21 +0100
Subject: [PATCH 7/8] style: height

---
 src/app/snapshots/[snapshotId]/_components/snapshot-detail.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/snapshots/[snapshotId]/_components/snapshot-detail.tsx b/src/app/snapshots/[snapshotId]/_components/snapshot-detail.tsx
index 2f7c50e53..0e9ff37fa 100644
--- a/src/app/snapshots/[snapshotId]/_components/snapshot-detail.tsx
+++ b/src/app/snapshots/[snapshotId]/_components/snapshot-detail.tsx
@@ -41,7 +41,7 @@ function DetailsContent({ snapshot }: Props) {
 
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader className="flex items-center gap-[10px]">
+			<CollapsibleHeader className="flex h-9 items-center gap-[10px]">
 				<CollapsibleTrigger className="flex w-full gap-2">
 					<CollapsibleChevron open={open} />
 					Details

From 27f83a5fff414718891ebca542f6fbcc60262796 Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Mon, 3 Nov 2025 10:16:02 +0100
Subject: [PATCH 8/8] fix: deepscan

---
 src/components/stacks/info/stack-info-component-list-item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/stacks/info/stack-info-component-list-item.tsx b/src/components/stacks/info/stack-info-component-list-item.tsx
index b3707bbe7..d3d5f5477 100644
--- a/src/components/stacks/info/stack-info-component-list-item.tsx
+++ b/src/components/stacks/info/stack-info-component-list-item.tsx
@@ -86,7 +86,7 @@ function ComponentCollapsibleHeader({
 							width={32}
 							height={32}
 							alt={`${componentName} logo`}
-							src={sanitizeUrl(componentLogoUrl || "")}
+							src={sanitizeUrl(componentLogoUrl)}
 						/>
 					) : (
 						<ComponentIcon type={componentType} />