fix: App mode - Move active output spinner/items outside scrollable area (#10243)

## Summary

Moves the in progress job items outside the scrollable area to remove
requirement for background on that section causing visual bug when
zoomed in
<img width="413" height="121" alt="image"
src="https://github.com/user-attachments/assets/4ad85260-1ab0-48c5-8625-7d5f67b1ccf8"
/>


## Changes
- **What**:  Restructure to outside rather than using sticky

## Screenshots (if applicable)

Overlapping image:
<img width="1143" height="91" alt="Screenshot 2026-03-18 043135"
src="https://github.com/user-attachments/assets/f7140100-18db-43bc-be79-9d4c95c58132"
/>

Scrolling:
<img width="801" height="81" alt="image"
src="https://github.com/user-attachments/assets/52d51c6f-747d-4d4e-bac1-d45b6607ead9"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10243-fix-App-mode-Move-active-output-spinner-items-outside-scrollable-area-3276d73d3650818186c1cbca84e53329)
by [Unito](https://www.unito.io)

src/renderer/extensions/linearMode/OutputHistory.vue

@@ -204,11 +204,7 @@ useResizeObserver(outputsRef, () => {
   lastScrollWidth = outputsRef.value?.scrollWidth ?? 0
 })
 watch(
-  [
-    () => store.activeWorkflowInProgressItems.length,
-    () => visibleHistory.value[0]?.id,
-    queueCount
-  ],
+  () => visibleHistory.value[0]?.id,
   () => {
     const el = outputsRef.value
     if (!el || el.scrollLeft === 0) {
@@ -302,59 +298,57 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
 })
 </script>
 <template>
-  <div role="group" class="min-w-0 px-4 pb-4">
+  <div
+    role="group"
+    class="flex h-21 min-w-0 items-start justify-center px-4 py-3 pb-4"
+  >
+    <div
+      v-if="queueCount > 0 || hasActiveContent"
+      class="flex h-15 shrink-0 items-start gap-0.5"
+    >
+      <OutputHistoryActiveQueueItem
+        v-if="queueCount > 1"
+        class="mr-3"
+        :queue-count="queueCount"
+      />
+
+      <div
+        v-if="mayBeActiveWorkflowPending"
+        :ref="selectedRef('slot:pending')"
+        v-bind="itemAttrs('slot:pending')"
+        :class="itemClass"
+        @click="store.select('slot:pending')"
+      >
+        <OutputPreviewItem />
+      </div>
+
+      <div
+        v-for="item in store.activeWorkflowInProgressItems"
+        :key="`${item.id}-${item.state}`"
+        :ref="selectedRef(`slot:${item.id}`)"
+        v-bind="itemAttrs(`slot:${item.id}`)"
+        :class="itemClass"
+        @click="store.select(`slot:${item.id}`)"
+      >
+        <OutputPreviewItem
+          v-if="item.state !== 'image' || !item.output"
+          :latent-preview="item.latentPreviewUrl"
+        />
+        <OutputHistoryItem v-else :output="item.output" />
+      </div>
+
+      <div
+        v-if="hasActiveContent && visibleHistory.length > 0"
+        class="mx-4 h-12 shrink-0 border-l border-border-default"
+      />
+    </div>
+
     <article
       ref="outputsRef"
       data-testid="linear-outputs"
-      class="min-w-0 overflow-x-auto overflow-y-clip py-3"
+      class="min-w-0 overflow-x-auto overflow-y-clip"
     >
-      <div class="mx-auto flex h-21 w-fit items-start gap-0.5">
-        <div
-          v-if="queueCount > 0 || hasActiveContent"
-          :class="
-            cn(
-              'sticky left-0 z-10 flex shrink-0 items-start gap-0.5',
-              'md:bg-comfy-menu-secondary-bg bg-comfy-menu-bg'
-            )
-          "
-        >
-          <OutputHistoryActiveQueueItem
-            v-if="queueCount > 1"
-            class="mr-3"
-            :queue-count="queueCount"
-          />
-
-          <div
-            v-if="mayBeActiveWorkflowPending"
-            :ref="selectedRef('slot:pending')"
-            v-bind="itemAttrs('slot:pending')"
-            :class="itemClass"
-            @click="store.select('slot:pending')"
-          >
-            <OutputPreviewItem />
-          </div>
-
-          <div
-            v-for="item in store.activeWorkflowInProgressItems"
-            :key="`${item.id}-${item.state}`"
-            :ref="selectedRef(`slot:${item.id}`)"
-            v-bind="itemAttrs(`slot:${item.id}`)"
-            :class="itemClass"
-            @click="store.select(`slot:${item.id}`)"
-          >
-            <OutputPreviewItem
-              v-if="item.state !== 'image' || !item.output"
-              :latent-preview="item.latentPreviewUrl"
-            />
-            <OutputHistoryItem v-else :output="item.output" />
-          </div>
-
-          <div
-            v-if="hasActiveContent && visibleHistory.length > 0"
-            class="mx-4 h-12 shrink-0 border-l border-border-default"
-          />
-        </div>
-
+      <div class="flex h-15 w-fit items-start gap-0.5">
         <template v-for="(asset, aIdx) in visibleHistory" :key="asset.id">
           <div
             v-if="aIdx > 0"