From 625a9845cfd6f5564db7805c57473513603bb0d5 Mon Sep 17 00:00:00 2001
From: Camiel van Schoonhoven <camiel.vanschoonhoven@shopify.com>
Date: Thu, 7 May 2026 18:36:40 -0700
Subject: [PATCH] fix: Stack gap audit

---
 .../components/AddGitHubLibraryDialogContent.tsx            | 2 +-
 .../shared/GitHubLibrary/components/InputField.tsx          | 2 +-
 .../TaskNode/ArgumentsEditor/ArgumentInputField.tsx         | 1 -
 .../shared/SecretsManagement/SelectSecretDialog.tsx         | 2 +-
 .../shared/SecretsManagement/components/SecretsList.tsx     | 2 +-
 src/components/shared/Status/TaskStatusBar.tsx              | 6 +++---
 src/components/shared/SubgraphBreadcrumbsView.tsx           | 1 -
 src/routes/v2/pages/Editor/EditorV2.tsx                     | 1 -
 .../pages/Editor/components/EditorMenuBar/EditorMenuBar.tsx | 4 ++--
 .../PipelineDetailsContent/components/PipelineDigestBar.tsx | 2 +-
 .../components/PipelineTreeContent/components/RootNode.tsx  | 2 +-
 .../PipelineTreeContent/components/SubgraphNode.tsx         | 3 +--
 .../PipelineTreeContent/components/TaskLeafNode.tsx         | 2 +-
 .../nodes/TaskNode/context/TaskDetails/TaskDetails.tsx      | 2 +-
 .../context/TaskDetails/components/ComponentRefBar.tsx      | 2 +-
 src/routes/v2/pages/RunView/RunViewV2.tsx                   | 1 -
 .../RunView/components/RunViewMenuBar/RunViewMenuBar.tsx    | 4 ++--
 src/routes/v2/shared/windows/DockArea.tsx                   | 2 +-
 18 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/components/shared/GitHubLibrary/components/AddGitHubLibraryDialogContent.tsx b/src/components/shared/GitHubLibrary/components/AddGitHubLibraryDialogContent.tsx
index 9dce2ba58..2f840dc3a 100644
--- a/src/components/shared/GitHubLibrary/components/AddGitHubLibraryDialogContent.tsx
+++ b/src/components/shared/GitHubLibrary/components/AddGitHubLibraryDialogContent.tsx
@@ -37,7 +37,7 @@ const ComponentList = ({
           >
             <Icon name="File" className="text-gray-400" size="lg" />
 
-            <BlockStack align="start" gap="0">
+            <BlockStack align="start">
               <Text className="truncate max-w-106.25">{component.name}</Text>
               <Text size="xs" tone="subdued" className="font-mono">
                 Ver: {trimDigest(component.digest)}
diff --git a/src/components/shared/GitHubLibrary/components/InputField.tsx b/src/components/shared/GitHubLibrary/components/InputField.tsx
index b7cf03b7e..536958aec 100644
--- a/src/components/shared/GitHubLibrary/components/InputField.tsx
+++ b/src/components/shared/GitHubLibrary/components/InputField.tsx
@@ -45,7 +45,7 @@ export const InputField = ({
   return (
     <BlockStack gap="2">
       <Label htmlFor={id}>{label}</Label>
-      <BlockStack gap="0">
+      <BlockStack>
         <Input
           id={id}
           placeholder={placeholder}
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/ArgumentsEditor/ArgumentInputField.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/ArgumentsEditor/ArgumentInputField.tsx
index 76c60912f..613aecaf8 100644
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/ArgumentsEditor/ArgumentInputField.tsx
+++ b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/ArgumentsEditor/ArgumentInputField.tsx
@@ -444,7 +444,6 @@ export const ArgumentInputField = ({
   return (
     <>
       <BlockStack
-        gap="0"
         className="relative w-full px-2"
         data-testid="argument-input-field"
         data-argument-name={argument.inputSpec.name}
diff --git a/src/components/shared/SecretsManagement/SelectSecretDialog.tsx b/src/components/shared/SecretsManagement/SelectSecretDialog.tsx
index 2b1856413..dc4bcb2a5 100644
--- a/src/components/shared/SecretsManagement/SelectSecretDialog.tsx
+++ b/src/components/shared/SecretsManagement/SelectSecretDialog.tsx
@@ -85,7 +85,7 @@ function SelectableSecretsList({
             >
               <InlineStack gap="2" blockAlign="center" wrap="nowrap">
                 <Icon name="Lock" size="lg" className="shrink-0" />
-                <BlockStack gap="0">
+                <BlockStack>
                   <Text size="sm" weight="semibold">
                     {secret.name}
                   </Text>
diff --git a/src/components/shared/SecretsManagement/components/SecretsList.tsx b/src/components/shared/SecretsManagement/components/SecretsList.tsx
index 10a643f3b..8f138b204 100644
--- a/src/components/shared/SecretsManagement/components/SecretsList.tsx
+++ b/src/components/shared/SecretsManagement/components/SecretsList.tsx
@@ -56,7 +56,7 @@ function SecretsListInternal({ onRemoveSuccess }: SecretsListProps) {
           >
             <InlineStack gap="2" blockAlign="center" wrap="nowrap">
               <Icon name="Lock" size="lg" className="shrink-0" />
-              <BlockStack gap="0">
+              <BlockStack>
                 <Text size="sm" weight="semibold">
                   {secret.name}
                 </Text>
diff --git a/src/components/shared/Status/TaskStatusBar.tsx b/src/components/shared/Status/TaskStatusBar.tsx
index a96b23518..ace41112f 100644
--- a/src/components/shared/Status/TaskStatusBar.tsx
+++ b/src/components/shared/Status/TaskStatusBar.tsx
@@ -72,7 +72,7 @@ const TaskStatusBar = ({
   executionStatusStats?: ExecutionStatusStats | null;
 }) => {
   if (!executionStatusStats) {
-    return <InlineStack wrap="nowrap" gap="0" className={BAR_CLASS} />;
+    return <InlineStack wrap="nowrap" className={BAR_CLASS} />;
   }
 
   const entries = Object.entries(executionStatusStats).filter(
@@ -80,7 +80,7 @@ const TaskStatusBar = ({
   );
 
   if (entries.length === 0) {
-    return <InlineStack wrap="nowrap" gap="0" className={BAR_CLASS} />;
+    return <InlineStack wrap="nowrap" className={BAR_CLASS} />;
   }
 
   const total = entries.reduce((sum, [, count]) => sum + (count ?? 0), 0);
@@ -101,7 +101,7 @@ const TaskStatusBar = ({
 
   return (
     <BlockStack className="relative">
-      <InlineStack wrap="nowrap" gap="0" className={BAR_CLASS}>
+      <InlineStack wrap="nowrap" className={BAR_CLASS}>
         {sortedEntries.map(([status, count]) => (
           <StatusSegment
             key={status}
diff --git a/src/components/shared/SubgraphBreadcrumbsView.tsx b/src/components/shared/SubgraphBreadcrumbsView.tsx
index 64d6c6b75..c31384594 100644
--- a/src/components/shared/SubgraphBreadcrumbsView.tsx
+++ b/src/components/shared/SubgraphBreadcrumbsView.tsx
@@ -35,7 +35,6 @@ export const SubgraphBreadcrumbsView = ({
   return (
     <InlineStack
       align="space-between"
-      gap="0"
       className="px-4 py-2 bg-gray-50 border-b w-full z-1"
     >
       <Breadcrumb>
diff --git a/src/routes/v2/pages/Editor/EditorV2.tsx b/src/routes/v2/pages/Editor/EditorV2.tsx
index aeadce8cc..94bac1e71 100644
--- a/src/routes/v2/pages/Editor/EditorV2.tsx
+++ b/src/routes/v2/pages/Editor/EditorV2.tsx
@@ -99,7 +99,6 @@ const PipelineEditor = withSuspenseWrapper(
         <SpecProvider spec={activeSpec}>
           <InlineStack
             className="flex-1 min-h-0 w-full"
-            gap="0"
             blockAlign="stretch"
             wrap="nowrap"
             data-testid="editor-v2"
diff --git a/src/routes/v2/pages/Editor/components/EditorMenuBar/EditorMenuBar.tsx b/src/routes/v2/pages/Editor/components/EditorMenuBar/EditorMenuBar.tsx
index dde281468..a82f3b6b6 100644
--- a/src/routes/v2/pages/Editor/components/EditorMenuBar/EditorMenuBar.tsx
+++ b/src/routes/v2/pages/Editor/components/EditorMenuBar/EditorMenuBar.tsx
@@ -67,7 +67,7 @@ export const EditorMenuBar = observer(function EditorMenuBar() {
           </Link>
 
           {displayMenu && (
-            <BlockStack gap="0" className="min-w-0">
+            <BlockStack className="min-w-0">
               <InlineStack
                 gap="1"
                 blockAlign="center"
@@ -102,7 +102,7 @@ export const EditorMenuBar = observer(function EditorMenuBar() {
                 isSubmitDisabled={(name) => name === pipelineName}
               />
 
-              <InlineStack gap="0" wrap="nowrap" blockAlign="center">
+              <InlineStack wrap="nowrap" blockAlign="center">
                 <FileMenu />
                 <ViewMenu />
                 <RunsMenu />
diff --git a/src/routes/v2/pages/Editor/components/PipelineDetailsContent/components/PipelineDigestBar.tsx b/src/routes/v2/pages/Editor/components/PipelineDetailsContent/components/PipelineDigestBar.tsx
index 1d0aaabf8..ae390f8ab 100644
--- a/src/routes/v2/pages/Editor/components/PipelineDetailsContent/components/PipelineDigestBar.tsx
+++ b/src/routes/v2/pages/Editor/components/PipelineDetailsContent/components/PipelineDigestBar.tsx
@@ -92,7 +92,7 @@ export const PipelineDigestBar = withSuspenseWrapper(
             />
           </Button>
 
-          <InlineStack gap="0" blockAlign="center" className="shrink-0">
+          <InlineStack blockAlign="center" className="shrink-0">
             <Button variant="ghost" size="min" onClick={handleCopyDigest}>
               <Icon name="Copy" size="sm" />
             </Button>
diff --git a/src/routes/v2/pages/Editor/components/PipelineTreeContent/components/RootNode.tsx b/src/routes/v2/pages/Editor/components/PipelineTreeContent/components/RootNode.tsx
index e87563633..5a3a18a92 100644
--- a/src/routes/v2/pages/Editor/components/PipelineTreeContent/components/RootNode.tsx
+++ b/src/routes/v2/pages/Editor/components/PipelineTreeContent/components/RootNode.tsx
@@ -44,7 +44,7 @@ export const RootNode = observer(function RootNode({
   };
 
   return (
-    <BlockStack gap="0" align="stretch" className="min-w-0 w-full">
+    <BlockStack align="stretch" className="min-w-0 w-full">
       <div
         className={treeNodeRowVariants({
           hasErrors,
diff --git a/src/routes/v2/pages/Editor/components/PipelineTreeContent/components/SubgraphNode.tsx b/src/routes/v2/pages/Editor/components/PipelineTreeContent/components/SubgraphNode.tsx
index bd503f3ea..24b7796cf 100644
--- a/src/routes/v2/pages/Editor/components/PipelineTreeContent/components/SubgraphNode.tsx
+++ b/src/routes/v2/pages/Editor/components/PipelineTreeContent/components/SubgraphNode.tsx
@@ -81,7 +81,7 @@ export const SubgraphNode = observer(function SubgraphNode({
   const collapsibleOpen = hasChildren ? isExpanded : true;
 
   return (
-    <BlockStack gap="0" align="stretch" className="min-w-0 w-full">
+    <BlockStack align="stretch" className="min-w-0 w-full">
       <Collapsible
         open={collapsibleOpen}
         onOpenChange={() => onToggleExpand(nodePath)}
@@ -173,7 +173,6 @@ export const SubgraphNode = observer(function SubgraphNode({
 
           {hasChildren && (
             <BlockStack
-              gap="0"
               align="stretch"
               className="ml-4 min-w-0 w-full border-l border-slate-200 pl-2"
             >
diff --git a/src/routes/v2/pages/Editor/components/PipelineTreeContent/components/TaskLeafNode.tsx b/src/routes/v2/pages/Editor/components/PipelineTreeContent/components/TaskLeafNode.tsx
index 88ef980a0..1e1f3bc0c 100644
--- a/src/routes/v2/pages/Editor/components/PipelineTreeContent/components/TaskLeafNode.tsx
+++ b/src/routes/v2/pages/Editor/components/PipelineTreeContent/components/TaskLeafNode.tsx
@@ -57,7 +57,7 @@ export const TaskLeafNode = observer(function TaskLeafNode({
   }
 
   return (
-    <BlockStack gap="0" align="stretch" className="min-w-0 w-full">
+    <BlockStack align="stretch" className="min-w-0 w-full">
       <TreeRowActivate
         layout="leafRow"
         selected={isSelected}
diff --git a/src/routes/v2/pages/Editor/nodes/TaskNode/context/TaskDetails/TaskDetails.tsx b/src/routes/v2/pages/Editor/nodes/TaskNode/context/TaskDetails/TaskDetails.tsx
index 632fd2d9c..36a7195a1 100644
--- a/src/routes/v2/pages/Editor/nodes/TaskNode/context/TaskDetails/TaskDetails.tsx
+++ b/src/routes/v2/pages/Editor/nodes/TaskNode/context/TaskDetails/TaskDetails.tsx
@@ -105,7 +105,7 @@ export const TaskDetails = observer(function TaskDetails({
   };
 
   return (
-    <BlockStack gap="0" className="h-full min-h-0 w-full">
+    <BlockStack className="h-full min-h-0 w-full">
       {/* ── Header ── */}
       <BlockStack gap="2" className="shrink-0 px-4 pt-3 pb-2">
         <InlineStack
diff --git a/src/routes/v2/pages/Editor/nodes/TaskNode/context/TaskDetails/components/ComponentRefBar.tsx b/src/routes/v2/pages/Editor/nodes/TaskNode/context/TaskDetails/components/ComponentRefBar.tsx
index 4319a79a8..2e807adf0 100644
--- a/src/routes/v2/pages/Editor/nodes/TaskNode/context/TaskDetails/components/ComponentRefBar.tsx
+++ b/src/routes/v2/pages/Editor/nodes/TaskNode/context/TaskDetails/components/ComponentRefBar.tsx
@@ -109,7 +109,7 @@ export function ComponentRefBar({
           }
         />
 
-        <InlineStack gap="0" blockAlign="center" className="shrink-0">
+        <InlineStack blockAlign="center" className="shrink-0">
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
diff --git a/src/routes/v2/pages/RunView/RunViewV2.tsx b/src/routes/v2/pages/RunView/RunViewV2.tsx
index 3d900f50a..fc16d113a 100644
--- a/src/routes/v2/pages/RunView/RunViewV2.tsx
+++ b/src/routes/v2/pages/RunView/RunViewV2.tsx
@@ -158,7 +158,6 @@ const RunViewLayout = observer(function RunViewLayout({
         <RunViewMenuBar />
         <InlineStack
           className="flex-1 min-h-0 w-full"
-          gap="0"
           blockAlign="stretch"
           wrap="nowrap"
           data-testid="run-view-v2"
diff --git a/src/routes/v2/pages/RunView/components/RunViewMenuBar/RunViewMenuBar.tsx b/src/routes/v2/pages/RunView/components/RunViewMenuBar/RunViewMenuBar.tsx
index 846c4fba2..db74ca94f 100644
--- a/src/routes/v2/pages/RunView/components/RunViewMenuBar/RunViewMenuBar.tsx
+++ b/src/routes/v2/pages/RunView/components/RunViewMenuBar/RunViewMenuBar.tsx
@@ -49,7 +49,7 @@ export const RunViewMenuBar = observer(function RunViewMenuBar() {
             />
           </Link>
 
-          <BlockStack gap="0" className="min-w-0">
+          <BlockStack className="min-w-0">
             <Text
               as="span"
               size="sm"
@@ -59,7 +59,7 @@ export const RunViewMenuBar = observer(function RunViewMenuBar() {
               {pipelineName}
             </Text>
 
-            <InlineStack gap="0" wrap="nowrap" blockAlign="center">
+            <InlineStack wrap="nowrap" blockAlign="center">
               <RunMenu />
               <RunViewViewMenu />
             </InlineStack>
diff --git a/src/routes/v2/shared/windows/DockArea.tsx b/src/routes/v2/shared/windows/DockArea.tsx
index 0ec6c6392..bf4c2425b 100644
--- a/src/routes/v2/shared/windows/DockArea.tsx
+++ b/src/routes/v2/shared/windows/DockArea.tsx
@@ -100,7 +100,7 @@ export const DockArea = observer(function DockArea({ side }: DockAreaProps) {
         data-dock-scroll
         className="absolute inset-0 overflow-y-auto overflow-x-hidden hide-scrollbar"
       >
-        <BlockStack gap="0">
+        <BlockStack>
           {visibleWindows.map((windowId, index) => (
             <Window
               key={windowId}