Improve linear compatibility with Safari, run button metadata (#8107)

I downloaded the oldest webkit based browser I could find after reports
of display issues. The changes here cause some minor styling tweaks, but
should be more compatible overall. A quick list of fixed issues
- Center panel placeholder had incorrect aspect ratio
<img height="500" alt="image"
src="https://github.com/user-attachments/assets/b75e3c49-20d9-4d6e-bca4-95cc8a73f821"
/>
- Image previews had incorrect aspect ratio (But the other way around)
<img height="500" alt="image"
src="https://github.com/user-attachments/assets/b8ebc58e-2655-41f8-a3b4-70ba65940612"
/>
- On mobile, output groups would flex incorrectly, resulting in a large
gap between them
<img height="500" alt="image"
src="https://github.com/user-attachments/assets/ed7e8e43-c34e-4ffc-a3ee-126b1a2ef4e0"
/>



Also moves the run button trigger source to a new 'linear' type


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8107-Improve-linear-compatibility-with-Safari-run-button-metadata-2ea6d73d3650814e89cbc190b6ca8f87)
by [Unito](https://www.unito.io)

src/components/ui/ZoomPane.vue

@@ -47,7 +47,7 @@ const transform = computed(() => {
 <template>
   <div
     ref="zoomPane"
-    class="contain-size flex place-content-center"
+    class="contain-size place-content-center"
     @wheel="handleWheel"
     @pointerdown.prevent="handleDown"
     @pointermove="handleMove"

src/platform/telemetry/types.ts

@@ -413,6 +413,7 @@ export type ExecutionTriggerSource =
   | 'keybinding'
   | 'legacy_ui'
   | 'unknown'
+  | 'linear'
 
 /**
  * Union type for all possible telemetry event properties

src/renderer/extensions/linearMode/ImagePreview.vue

@@ -18,6 +18,7 @@ const height = ref('')
       ref="imageRef"
       :src
       v-bind="slotProps"
+      class="h-full object-contain w-full"
       @load="
         () => {
           if (!imageRef) return

src/renderer/extensions/linearMode/LinearControls.vue

@@ -118,9 +118,6 @@ async function runButtonClick(e: Event) {
       ? 'Comfy.QueuePromptFront'
       : 'Comfy.QueuePrompt'
 
-    useTelemetry()?.trackUiButtonClicked({
-      button_id: props.mobile ? 'queue_run_linear_mobile' : 'queue_run_linear'
-    })
     if (batchCount.value > 1) {
       useTelemetry()?.trackUiButtonClicked({
         button_id: 'queue_run_multiple_batches_submitted'
@@ -129,7 +126,7 @@ async function runButtonClick(e: Event) {
     await commandStore.execute(commandId, {
       metadata: {
         subscribe_to_run: false,
-        trigger_source: 'button'
+        trigger_source: 'linear'
       }
     })
   } finally {

src/renderer/extensions/linearMode/LinearPreview.vue

@@ -178,7 +178,7 @@ async function rerun(e: Event) {
   />
   <img
     v-else
-    class="pointer-events-none object-contain flex-1 max-h-full md:contain-size brightness-50 opacity-10"
+    class="pointer-events-none flex-1 max-h-full md:contain-size brightness-50 opacity-10"
     src="/assets/images/comfy-logo-mono.svg"
   />
 </template>

src/renderer/extensions/linearMode/OutputHistory.vue

@@ -247,18 +247,16 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
           "
         />
       </section>
-      <section
+      <template v-for="(item, index) in outputs.media.value" :key="index">
-        v-for="(item, index) in outputs.media.value"
+        <div
-        :key="index"
+          class="border-border-subtle not-md:border-l md:border-t first:border-none not-md:h-21 md:w-full m-3"
-        data-testid="linear-job"
+        />
-        class="py-3 not-md:h-24 border-border-subtle flex md:flex-col md:w-full px-1 first:border-t-0 first:border-l-0 md:border-t-2 not-md:border-l-2"
-      >
         <template v-for="(output, key) in allOutputs(item)" :key>
           <img
             v-if="getMediaType(output) === 'images'"
             :class="
               cn(
-                'p-1 rounded-lg aspect-square object-cover',
+                'p-1 rounded-lg aspect-square object-cover not-md:h-20 md:w-full',
                 index === selectedIndex[0] &&
                   key === selectedIndex[1] &&
                   'border-2'
@@ -286,7 +284,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
             />
           </div>
         </template>
-      </section>
+      </template>
     </article>
   </div>
   <Teleport