fix: align teleported dropdown right edge to trigger right edge

Amp-Thread-ID: https://ampcode.com/threads/T-019d6fd8-61fd-76ed-975a-71e146c1dd5e
Co-authored-by: Amp <amp@ampcode.com>

.github/actions/find-workflow-run/action.yaml

@@ -1,65 +0,0 @@
-name: Find Workflow Run
-description: Finds a workflow run for a given commit SHA and outputs its status and run ID.
-
-inputs:
-  workflow-id:
-    description: The workflow filename (e.g., 'ci-size-data.yaml')
-    required: true
-  head-sha:
-    description: The commit SHA to find runs for
-    required: true
-  not-found-status:
-    description: Status to output when no run exists
-    required: false
-    default: pending
-  token:
-    description: GitHub token for API access
-    required: true
-
-outputs:
-  status:
-    description: One of 'ready', 'pending', 'failed', or the not-found-status value
-    value: ${{ steps.find.outputs.status }}
-  run-id:
-    description: The workflow run ID (only set when status is 'ready')
-    value: ${{ steps.find.outputs.run-id }}
-
-runs:
-  using: composite
-  steps:
-    - name: Find workflow run
-      id: find
-      uses: actions/github-script@v8
-      env:
-        WORKFLOW_ID: ${{ inputs.workflow-id }}
-        HEAD_SHA: ${{ inputs.head-sha }}
-        NOT_FOUND_STATUS: ${{ inputs.not-found-status }}
-      with:
-        github-token: ${{ inputs.token }}
-        script: |
-          const { data: runs } = await github.rest.actions.listWorkflowRuns({
-            owner: context.repo.owner,
-            repo: context.repo.repo,
-            workflow_id: process.env.WORKFLOW_ID,
-            head_sha: process.env.HEAD_SHA,
-            per_page: 1,
-          });
-
-          const run = runs.workflow_runs[0];
-          if (!run) {
-            core.setOutput('status', process.env.NOT_FOUND_STATUS);
-            return;
-          }
-
-          if (run.status !== 'completed') {
-            core.setOutput('status', 'pending');
-            return;
-          }
-
-          if (run.conclusion !== 'success') {
-            core.setOutput('status', 'failed');
-            return;
-          }
-
-          core.setOutput('status', 'ready');
-          core.setOutput('run-id', String(run.id));

.github/workflows/ci-tests-e2e-coverage.yaml

@@ -1,73 +0,0 @@
-name: 'CI: E2E Coverage'
-
-on:
-  workflow_run:
-    workflows: ['CI: Tests E2E']
-    types:
-      - completed
-
-concurrency:
-  group: e2e-coverage-${{ github.event.workflow_run.head_sha }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  merge:
-    if: >
-      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
-      github.event.workflow_run.conclusion == 'success'
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-
-      - name: Download all shard coverage data
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          run_id: ${{ github.event.workflow_run.id }}
-          name: e2e-coverage-shard-.*
-          name_is_regexp: true
-          path: temp/coverage-shards
-          if_no_artifact_found: warn
-
-      - name: Install lcov
-        run: sudo apt-get install -y -qq lcov
-
-      - name: Merge shard coverage into single LCOV
-        run: |
-          mkdir -p coverage/playwright
-          LCOV_FILES=$(find temp/coverage-shards -name 'coverage.lcov' -type f)
-          if [ -z "$LCOV_FILES" ]; then
-            echo "No coverage.lcov files found"
-            touch coverage/playwright/coverage.lcov
-            exit 0
-          fi
-          ADD_ARGS=""
-          for f in $LCOV_FILES; do ADD_ARGS="$ADD_ARGS -a $f"; done
-          lcov $ADD_ARGS -o coverage/playwright/coverage.lcov
-          wc -l coverage/playwright/coverage.lcov
-
-      - name: Upload merged coverage data
-        if: always()
-        uses: actions/upload-artifact@v6
-        with:
-          name: e2e-coverage
-          path: coverage/playwright/
-          retention-days: 30
-          if-no-files-found: warn
-
-      - name: Upload E2E coverage to Codecov
-        if: always()
-        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5.5.3
-        with:
-          files: coverage/playwright/coverage.lcov
-          flags: e2e
-          token: ${{ secrets.CODECOV_TOKEN }}
-          fail_ci_if_error: false

.github/workflows/ci-tests-e2e.yaml

@@ -86,7 +86,6 @@ jobs:
         run: pnpm exec playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
         env:
           PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
-          COLLECT_COVERAGE: 'true'
 
       - name: Upload blob report
         uses: actions/upload-artifact@v6
@@ -96,15 +95,6 @@ jobs:
           path: blob-report/
           retention-days: 1
 
-      - name: Upload shard coverage data
-        if: always()
-        uses: actions/upload-artifact@v6
-        with:
-          name: e2e-coverage-shard-${{ matrix.shardIndex }}
-          path: coverage/playwright/
-          retention-days: 1
-          if-no-files-found: warn
-
   playwright-tests:
     # Ideally, each shard runs test in 6 minutes, but allow up to 15 minutes
     timeout-minutes: 15

.github/workflows/ci-tests-unit.yaml

@@ -26,20 +26,10 @@ jobs:
       - name: Run Vitest tests with coverage
         run: pnpm test:coverage
 
-      - name: Upload unit coverage artifact
-        if: always() && github.event_name == 'push'
-        uses: actions/upload-artifact@v6
-        with:
-          name: unit-coverage
-          path: coverage/lcov.info
-          retention-days: 30
-          if-no-files-found: warn
-
       - name: Upload coverage to Codecov
         if: always()
         uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5.5.3
         with:
           files: coverage/lcov.info
-          flags: unit
           token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: false

.github/workflows/coverage-slack-notify.yaml

@@ -1,149 +0,0 @@
-name: 'Coverage: Slack Notification'
-
-on:
-  workflow_run:
-    workflows: ['CI: Tests Unit']
-    branches: [main]
-    types:
-      - completed
-
-permissions:
-  contents: read
-  actions: read
-  pull-requests: read
-
-jobs:
-  notify:
-    if: >
-      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
-      github.event.workflow_run.conclusion == 'success' &&
-      github.event.workflow_run.event == 'push'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-
-      - name: Download current unit coverage
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          run_id: ${{ github.event.workflow_run.id }}
-          name: unit-coverage
-          path: coverage
-
-      - name: Download previous unit coverage baseline
-        continue-on-error: true
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          branch: main
-          workflow: coverage-slack-notify.yaml
-          name: unit-coverage-baseline
-          path: temp/coverage-baseline
-          if_no_artifact_found: warn
-
-      - name: Download latest E2E coverage
-        continue-on-error: true
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          branch: main
-          workflow: ci-tests-e2e-coverage.yaml
-          name: e2e-coverage
-          path: temp/e2e-coverage
-          if_no_artifact_found: warn
-
-      - name: Download previous E2E coverage baseline
-        continue-on-error: true
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          branch: main
-          workflow: coverage-slack-notify.yaml
-          name: e2e-coverage-baseline
-          path: temp/e2e-coverage-baseline
-          if_no_artifact_found: warn
-
-      - name: Resolve merged PR metadata
-        id: pr-meta
-        uses: actions/github-script@v8
-        with:
-          script: |
-            const sha = context.payload.workflow_run.head_sha;
-            const { data: commit } = await github.rest.repos.getCommit({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              ref: sha,
-            });
-            const message = commit.commit.message ?? '';
-            const firstLine = message.split('\n')[0];
-            const match = firstLine.match(/\(#(\d+)\)\s*$/);
-            if (!match) {
-              core.setOutput('skip', 'true');
-              core.info('No PR number found in commit message — skipping.');
-              return;
-            }
-            const prNumber = match[1];
-            const { data: pr } = await github.rest.pulls.get({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              pull_number: Number(prNumber),
-            });
-            core.setOutput('skip', 'false');
-            core.setOutput('number', prNumber);
-            core.setOutput('url', pr.html_url);
-            core.setOutput('author', pr.user.login);
-
-      - name: Generate Slack notification
-        if: steps.pr-meta.outputs.skip != 'true'
-        id: slack-payload
-        env:
-          PR_URL: ${{ steps.pr-meta.outputs.url }}
-          PR_NUMBER: ${{ steps.pr-meta.outputs.number }}
-          PR_AUTHOR: ${{ steps.pr-meta.outputs.author }}
-        run: |
-          PAYLOAD=$(pnpm exec tsx scripts/coverage-slack-notify.ts \
-            --pr-url="$PR_URL" \
-            --pr-number="$PR_NUMBER" \
-            --author="$PR_AUTHOR")
-          if [ -n "$PAYLOAD" ]; then
-            echo "has_payload=true" >> "$GITHUB_OUTPUT"
-            DELIM="SLACK_PAYLOAD_$(date +%s)"
-            echo "payload<<$DELIM" >> "$GITHUB_OUTPUT"
-            printf '%s\n' "$PAYLOAD" >> "$GITHUB_OUTPUT"
-            echo "$DELIM" >> "$GITHUB_OUTPUT"
-          else
-            echo "has_payload=false" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: Post to Slack
-        if: steps.slack-payload.outputs.has_payload == 'true'
-        continue-on-error: true
-        env:
-          SLACK_PAYLOAD: ${{ steps.slack-payload.outputs.payload }}
-          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
-        run: |
-          # Channel: #p-frontend-automated-testing
-          BODY=$(echo "$SLACK_PAYLOAD" | jq --arg ch "C0AP09LKRDZ" '. + {channel: $ch}')
-          curl -sf -X POST \
-            -H "Authorization: Bearer $SLACK_BOT_TOKEN" \
-            -H "Content-Type: application/json" \
-            -d "$BODY" \
-            -o /dev/null \
-            https://slack.com/api/chat.postMessage
-
-      - name: Save unit coverage baseline
-        if: always() && hashFiles('coverage/lcov.info') != ''
-        uses: actions/upload-artifact@v6
-        with:
-          name: unit-coverage-baseline
-          path: coverage/lcov.info
-          retention-days: 90
-          if-no-files-found: warn
-
-      - name: Save E2E coverage baseline
-        if: always() && hashFiles('temp/e2e-coverage/coverage.lcov') != ''
-        uses: actions/upload-artifact@v6
-        with:
-          name: e2e-coverage-baseline
-          path: temp/e2e-coverage/coverage.lcov
-          retention-days: 90
-          if-no-files-found: warn

.github/workflows/pr-report.yaml

@@ -2,7 +2,7 @@ name: 'PR: Unified Report'
 
 on:
   workflow_run:
-    workflows: ['CI: Size Data', 'CI: Performance Report', 'CI: E2E Coverage']
+    workflows: ['CI: Size Data', 'CI: Performance Report']
     types:
       - completed
 
@@ -67,23 +67,73 @@ jobs:
             core.setOutput('base', livePr.base.ref);
             core.setOutput('head-sha', livePr.head.sha);
 
-      - name: Find size workflow run
+      - name: Find size workflow run for this commit
         if: steps.pr-meta.outputs.skip != 'true'
         id: find-size
-        uses: ./.github/actions/find-workflow-run
+        uses: actions/github-script@v8
         with:
-          workflow-id: ci-size-data.yaml
-          head-sha: ${{ steps.pr-meta.outputs.head-sha }}
-          token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const headSha = '${{ steps.pr-meta.outputs.head-sha }}';
+            const { data: runs } = await github.rest.actions.listWorkflowRuns({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              workflow_id: 'ci-size-data.yaml',
+              head_sha: headSha,
+              per_page: 1,
+            });
 
-      - name: Find perf workflow run
+            const run = runs.workflow_runs[0];
+            if (!run) {
+              core.setOutput('status', 'pending');
+              return;
+            }
+
+            if (run.status !== 'completed') {
+              core.setOutput('status', 'pending');
+              return;
+            }
+
+            if (run.conclusion !== 'success') {
+              core.setOutput('status', 'failed');
+              return;
+            }
+
+            core.setOutput('status', 'ready');
+            core.setOutput('run-id', String(run.id));
+
+      - name: Find perf workflow run for this commit
         if: steps.pr-meta.outputs.skip != 'true'
         id: find-perf
-        uses: ./.github/actions/find-workflow-run
+        uses: actions/github-script@v8
         with:
-          workflow-id: ci-perf-report.yaml
-          head-sha: ${{ steps.pr-meta.outputs.head-sha }}
-          token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const headSha = '${{ steps.pr-meta.outputs.head-sha }}';
+            const { data: runs } = await github.rest.actions.listWorkflowRuns({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              workflow_id: 'ci-perf-report.yaml',
+              head_sha: headSha,
+              per_page: 1,
+            });
+
+            const run = runs.workflow_runs[0];
+            if (!run) {
+              core.setOutput('status', 'pending');
+              return;
+            }
+
+            if (run.status !== 'completed') {
+              core.setOutput('status', 'pending');
+              return;
+            }
+
+            if (run.conclusion !== 'success') {
+              core.setOutput('status', 'failed');
+              return;
+            }
+
+            core.setOutput('status', 'ready');
+            core.setOutput('run-id', String(run.id));
 
       - name: Download size data (current)
         if: steps.pr-meta.outputs.skip != 'true' && steps.find-size.outputs.status == 'ready'
@@ -104,25 +154,6 @@ jobs:
           path: temp/size-prev
           if_no_artifact_found: warn
 
-      - name: Find coverage workflow run
-        if: steps.pr-meta.outputs.skip != 'true'
-        id: find-coverage
-        uses: ./.github/actions/find-workflow-run
-        with:
-          workflow-id: ci-tests-e2e-coverage.yaml
-          head-sha: ${{ steps.pr-meta.outputs.head-sha }}
-          not-found-status: skip
-          token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Download coverage data
-        if: steps.pr-meta.outputs.skip != 'true' && steps.find-coverage.outputs.status == 'ready'
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          name: e2e-coverage
-          run_id: ${{ steps.find-coverage.outputs.run-id }}
-          path: temp/coverage
-          if_no_artifact_found: warn
-
       - name: Download perf metrics (current)
         if: steps.pr-meta.outputs.skip != 'true' && steps.find-perf.outputs.status == 'ready'
         uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
@@ -158,10 +189,9 @@ jobs:
       - name: Generate unified report
         if: steps.pr-meta.outputs.skip != 'true'
         run: >
-          pnpm exec tsx scripts/unified-report.ts
+          node scripts/unified-report.js
           --size-status=${{ steps.find-size.outputs.status }}
           --perf-status=${{ steps.find-perf.outputs.status }}
-          --coverage-status=${{ steps.find-coverage.outputs.status }}
           > pr-report.md
 
       - name: Remove legacy separate comments

browser_tests/fixtures/ComfyPage.ts

@@ -1,7 +1,6 @@
 import type { APIRequestContext, Locator, Page } from '@playwright/test'
 import { test as base } from '@playwright/test'
 import { config as dotenvConfig } from 'dotenv'
-import MCR from 'monocart-coverage-reports'
 
 import { NodeBadgeMode } from '@/types/nodeSource'
 import { ComfyActionbar } from '@e2e/helpers/actionbar'
@@ -408,28 +407,10 @@ export class ComfyPage {
 
 export const testComfySnapToGridGridSize = 50
 
-const COLLECT_COVERAGE = process.env.COLLECT_COVERAGE === 'true'
-
 export const comfyPageFixture = base.extend<{
   comfyPage: ComfyPage
   comfyMouse: ComfyMouse
 }>({
-  page: async ({ page, browserName }, use) => {
-    if (browserName !== 'chromium' || !COLLECT_COVERAGE) {
-      return use(page)
-    }
-
-    await page.coverage.startJSCoverage({ resetOnNavigation: false })
-    await use(page)
-    const coverage = await page.coverage.stopJSCoverage()
-
-    const mcr = MCR({
-      outputDir: './coverage/playwright',
-      reports: []
-    })
-    await mcr.add(coverage)
-  },
-
   comfyPage: async ({ page, request }, use, testInfo) => {
     const comfyPage = new ComfyPage(page, request)
 

browser_tests/fixtures/selectors.ts

@@ -112,7 +112,9 @@ export const TestIds = {
     decrement: 'decrement',
     increment: 'increment',
     domWidgetTextarea: 'dom-widget-textarea',
-    subgraphEnterButton: 'subgraph-enter-button'
+    subgraphEnterButton: 'subgraph-enter-button',
+    formDropdownMenu: 'form-dropdown-menu',
+    formDropdownTrigger: 'form-dropdown-trigger'
   },
   builder: {
     footerNav: 'builder-footer-nav',

browser_tests/globalTeardown.ts

@@ -1,29 +1,15 @@
 import { config as dotenvConfig } from 'dotenv'
-import MCR from 'monocart-coverage-reports'
 
 import { writePerfReport } from '@e2e/helpers/perfReporter'
 import { restorePath } from '@e2e/utils/backupUtils'
 
 dotenvConfig()
 
-export default async function globalTeardown() {
+export default function globalTeardown() {
   writePerfReport()
 
   if (!process.env.CI && process.env.TEST_COMFYUI_DIR) {
     restorePath([process.env.TEST_COMFYUI_DIR, 'user'])
     restorePath([process.env.TEST_COMFYUI_DIR, 'models'])
   }
-
-  if (process.env.COLLECT_COVERAGE === 'true') {
-    const mcr = MCR({
-      outputDir: './coverage/playwright',
-      reports: [['lcovonly', { file: 'coverage.lcov' }], ['text-summary']],
-      sourceFilter: {
-        '**/node_modules/**': false,
-        '**/browser_tests/**': false,
-        '**/*': true
-      }
-    })
-    await mcr.generate()
-  }
 }

browser_tests/tests/appModeDropdownClipping.spec.ts

@@ -4,6 +4,7 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 /**
  * Default workflow widget inputs as [nodeId, widgetName] tuples.
@@ -137,12 +138,12 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     const dropdownButton = imageRow.locator('button:has(> span)').first()
     await dropdownButton.click()
 
-    // The unstyled PrimeVue Popover renders with role="dialog".
-    // Locate the one containing the image grid (filter buttons like "All", "Inputs").
-    const popover = comfyPage.appMode.imagePickerPopover
-    await expect(popover).toBeVisible({ timeout: 5000 })
+    const menu = comfyPage.page
+      .getByTestId(TestIds.widgets.formDropdownMenu)
+      .first()
+    await expect(menu).toBeVisible({ timeout: 5000 })
 
-    const isInViewport = await popover.evaluate((el) => {
+    const isInViewport = await menu.evaluate((el) => {
       const rect = el.getBoundingClientRect()
       return (
         rect.top >= 0 &&
@@ -153,7 +154,7 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     })
     expect(isInViewport).toBe(true)
 
-    const isClipped = await popover.evaluate(isClippedByAnyAncestor)
+    const isClipped = await menu.evaluate(isClippedByAnyAncestor)
     expect(isClipped).toBe(false)
   })
 })

browser_tests/tests/vueNodes/widgets/load/formDropdownPosition.spec.ts

@@ -0,0 +1,116 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import { TestIds } from '../../../../fixtures/selectors'
+
+test.describe(
+  'FormDropdown positioning in Vue nodes',
+  { tag: ['@widget', '@node'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+      await comfyPage.vueNodes.waitForNodes()
+    })
+
+    test('dropdown menu appears directly below the trigger', async ({
+      comfyPage
+    }) => {
+      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
+      await expect(node).toBeVisible()
+
+      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
+      await trigger.first().click()
+
+      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
+      await expect(menu).toBeVisible({ timeout: 5000 })
+
+      const triggerBox = await trigger.first().boundingBox()
+      const menuBox = await menu.boundingBox()
+
+      expect(triggerBox).toBeTruthy()
+      expect(menuBox).toBeTruthy()
+
+      // Menu top should be near the trigger bottom (within 20px tolerance for padding)
+      expect(menuBox!.y).toBeGreaterThanOrEqual(
+        triggerBox!.y + triggerBox!.height - 5
+      )
+      expect(menuBox!.y).toBeLessThanOrEqual(
+        triggerBox!.y + triggerBox!.height + 20
+      )
+
+      // Menu left should be near the trigger left (within 10px tolerance)
+      expect(menuBox!.x).toBeGreaterThanOrEqual(triggerBox!.x - 10)
+      expect(menuBox!.x).toBeLessThanOrEqual(triggerBox!.x + 10)
+    })
+
+    test('dropdown menu appears correctly at different zoom levels', async ({
+      comfyPage
+    }) => {
+      for (const zoom of [0.75, 1.5]) {
+        // Set zoom via canvas
+        await comfyPage.page.evaluate((scale) => {
+          const canvas = window.app!.canvas
+          canvas.ds.scale = scale
+          canvas.setDirty(true, true)
+        }, zoom)
+        await comfyPage.nextFrame()
+
+        const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
+        await expect(node).toBeVisible()
+
+        const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
+        await trigger.first().click()
+
+        const menu = comfyPage.page.getByTestId(
+          TestIds.widgets.formDropdownMenu
+        )
+        await expect(menu).toBeVisible({ timeout: 5000 })
+
+        const triggerBox = await trigger.first().boundingBox()
+        const menuBox = await menu.boundingBox()
+
+        expect(triggerBox).toBeTruthy()
+        expect(menuBox).toBeTruthy()
+
+        // Menu top should still be near trigger bottom regardless of zoom
+        expect(menuBox!.y).toBeGreaterThanOrEqual(
+          triggerBox!.y + triggerBox!.height - 5
+        )
+        expect(menuBox!.y).toBeLessThanOrEqual(
+          triggerBox!.y + triggerBox!.height + 20 * zoom
+        )
+
+        // Close dropdown before next iteration
+        await comfyPage.page.keyboard.press('Escape')
+        await expect(menu).not.toBeVisible()
+      }
+    })
+
+    test('dropdown closes on outside click', async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
+      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
+      await trigger.first().click()
+
+      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
+      await expect(menu).toBeVisible({ timeout: 5000 })
+
+      // Click outside the node
+      await comfyPage.page.mouse.click(10, 10)
+      await expect(menu).not.toBeVisible()
+    })
+
+    test('dropdown closes on Escape key', async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
+      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
+      await trigger.first().click()
+
+      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
+      await expect(menu).toBeVisible({ timeout: 5000 })
+
+      await comfyPage.page.keyboard.press('Escape')
+      await expect(menu).not.toBeVisible()
+    })
+  }
+)

package.json

@@ -44,7 +44,6 @@
     "stylelint:fix": "stylelint --cache --fix '{apps,packages,src}/**/*.{css,vue}'",
     "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
     "test:browser": "pnpm exec nx e2e",
-    "test:browser:coverage": "cross-env COLLECT_COVERAGE=true pnpm test:browser",
     "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 PLAYWRIGHT_TEST_URL=http://localhost:5173 pnpm test:browser",
     "test:coverage": "vitest run --coverage",
     "test:unit": "nx run test",
@@ -175,7 +174,6 @@
     "lint-staged": "catalog:",
     "markdown-table": "catalog:",
     "mixpanel-browser": "catalog:",
-    "monocart-coverage-reports": "catalog:",
     "nx": "catalog:",
     "oxfmt": "catalog:",
     "oxlint": "catalog:",

playwright.config.ts

@@ -3,12 +3,15 @@ import { defineConfig, devices } from '@playwright/test'
 
 const maybeLocalOptions: PlaywrightTestConfig = process.env.PLAYWRIGHT_LOCAL
   ? {
-      timeout: 30_000,
-      retries: 0,
-      workers: 1,
+      // VERY HELPFUL: Skip screenshot tests locally
+      // grep: process.env.CI ? undefined : /^(?!.*screenshot).*$/,
+      timeout: 30_000, // Longer timeout for breakpoints
+      retries: 0, // No retries while debugging. Increase if writing new tests. that may be flaky.
+      workers: 1, // Single worker for easier debugging. Increase to match CPU cores if you want to run a lot of tests in parallel.
+
       use: {
-        trace: 'on',
-        video: 'on'
+        trace: 'on', // Always capture traces (CI uses 'on-first-retry')
+        video: 'on' // Always record video (CI uses 'retain-on-failure')
       }
     }
   : {
@@ -33,7 +36,7 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
       timeout: 15000,
-      grepInvert: /@mobile|@perf|@audit|@cloud/
+      grepInvert: /@mobile|@perf|@audit|@cloud/ // Run all tests except those tagged with @mobile, @perf, @audit, or @cloud
     },
 
     {
@@ -62,28 +65,60 @@ export default defineConfig({
       name: 'chromium-2x',
       use: { ...devices['Desktop Chrome'], deviceScaleFactor: 2 },
       timeout: 15000,
-      grep: /@2x/
+      grep: /@2x/ // Run all tests tagged with @2x
     },
 
     {
       name: 'chromium-0.5x',
       use: { ...devices['Desktop Chrome'], deviceScaleFactor: 0.5 },
       timeout: 15000,
-      grep: /@0.5x/
+      grep: /@0.5x/ // Run all tests tagged with @0.5x
     },
 
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
     {
       name: 'cloud',
       use: { ...devices['Desktop Chrome'] },
       timeout: 15000,
-      grep: /@cloud/,
-      grepInvert: /@oss/
+      grep: /@cloud/, // Run only tests tagged with @cloud
+      grepInvert: /@oss/ // Exclude tests tagged with @oss
     },
 
+    /* Test against mobile viewports. */
     {
       name: 'mobile-chrome',
       use: { ...devices['Pixel 5'], hasTouch: true },
-      grep: /@mobile/
+      grep: /@mobile/ // Run only tests tagged with @mobile
     }
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
   ]
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'pnpm dev',
+  //   url: 'http://127.0.0.1:5173',
+  //   reuseExistingServer: !process.env.CI,
+  // },
 })

pnpm-lock.yaml

@@ -276,9 +276,6 @@ catalogs:
     mixpanel-browser:
       specifier: ^2.71.0
       version: 2.71.0
-    monocart-coverage-reports:
-      specifier: ^2.12.9
-      version: 2.12.9
     nx:
       specifier: 22.6.1
       version: 22.6.1
@@ -765,9 +762,6 @@ importers:
       mixpanel-browser:
         specifier: 'catalog:'
         version: 2.71.0
-      monocart-coverage-reports:
-        specifier: 'catalog:'
-        version: 2.12.9
       nx:
         specifier: 'catalog:'
         version: 22.6.1
@@ -5003,14 +4997,6 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn-loose@8.5.2:
-    resolution: {integrity: sha512-PPvV6g8UGMGgjrMu+n/f9E/tCSkNQ2Y97eFvuVdJfG11+xdIeDcLyNdC8SHcrHbRqkfwLASdplyR6B6sKM1U4A==}
-    engines: {node: '>=0.4.0'}
-
-  acorn-walk@8.3.5:
-    resolution: {integrity: sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==}
-    engines: {node: '>=0.4.0'}
-
   acorn@7.4.1:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
@@ -5595,9 +5581,6 @@ packages:
     resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
-  console-grid@2.2.3:
-    resolution: {integrity: sha512-+mecFacaFxGl+1G31IsCx41taUXuW2FxX+4xIE0TIPhgML+Jb9JFcBWGhhWerd1/vhScubdmHqTwOhB0KCUUAg==}
-
   constantinople@4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
 
@@ -5927,9 +5910,6 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  eight-colors@1.3.3:
-    resolution: {integrity: sha512-4B54S2Qi4pJjeHmCbDIsveQZWQ/TSSQng4ixYJ9/SYHHpeS5nYK0pzcHvWzWUfRsvJQjwoIENhAwqg59thQceg==}
-
   ejs@3.1.10:
     resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==}
     engines: {node: '>=0.10.0'}
@@ -7478,9 +7458,6 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
-  lz-utils@2.1.0:
-    resolution: {integrity: sha512-CMkfimAypidTtWjNDxY8a1bc1mJdyEh04V2FfEQ5Zh8Nx4v7k850EYa+dOWGn9hKG5xOyHP5MkuduAZCTHRvJw==}
-
   magic-string-ast@1.0.3:
     resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
     engines: {node: '>=20.19.0'}
@@ -7757,13 +7734,6 @@ packages:
     resolution: {integrity: sha512-4W79zekKGyYU4JXVmB78DOscMFaJth2gGhgfTl2alWE4rNe3nf4N2pqenQ0rEtIewrnD79M687Ouba3YGTLOvg==}
     engines: {node: '>=18.0.0'}
 
-  monocart-coverage-reports@2.12.9:
-    resolution: {integrity: sha512-vtFqbC3Egl4nVa1FSIrQvMPO6HZtb9lo+3IW7/crdvrLNW2IH8lUsxaK0TsKNmMO2mhFWwqQywLV2CZelqPgwA==}
-    hasBin: true
-
-  monocart-locator@1.0.2:
-    resolution: {integrity: sha512-v8W5hJLcWMIxLCcSi/MHh+VeefI+ycFmGz23Froer9QzWjrbg4J3gFJBuI/T1VLNoYxF47bVPPxq8ZlNX4gVCw==}
-
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -14204,14 +14174,6 @@ snapshots:
     dependencies:
       acorn: 8.16.0
 
-  acorn-loose@8.5.2:
-    dependencies:
-      acorn: 8.16.0
-
-  acorn-walk@8.3.5:
-    dependencies:
-      acorn: 8.16.0
-
   acorn@7.4.1: {}
 
   acorn@8.16.0: {}
@@ -14937,8 +14899,6 @@ snapshots:
 
   consola@3.4.2: {}
 
-  console-grid@2.2.3: {}
-
   constantinople@4.0.1:
     dependencies:
       '@babel/parser': 7.29.0
@@ -15281,8 +15241,6 @@ snapshots:
       minimatch: 9.0.1
       semver: 7.7.4
 
-  eight-colors@1.3.3: {}
-
   ejs@3.1.10:
     dependencies:
       jake: 10.9.2
@@ -17059,8 +17017,6 @@ snapshots:
 
   lz-string@1.5.0: {}
 
-  lz-utils@2.1.0: {}
-
   magic-string-ast@1.0.3:
     dependencies:
       magic-string: 0.30.21
@@ -17533,23 +17489,6 @@ snapshots:
 
   modern-tar@0.7.3: {}
 
-  monocart-coverage-reports@2.12.9:
-    dependencies:
-      acorn: 8.16.0
-      acorn-loose: 8.5.2
-      acorn-walk: 8.3.5
-      commander: 14.0.3
-      console-grid: 2.2.3
-      eight-colors: 1.3.3
-      foreground-child: 3.3.1
-      istanbul-lib-coverage: 3.2.2
-      istanbul-lib-report: 3.0.1
-      istanbul-reports: 3.2.0
-      lz-utils: 2.1.0
-      monocart-locator: 1.0.2
-
-  monocart-locator@1.0.2: {}
-
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}

pnpm-workspace.yaml

@@ -93,7 +93,6 @@ catalog:
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
-  monocart-coverage-reports: ^2.12.9
   nx: 22.6.1
   oxfmt: ^0.44.0
   oxlint: ^1.59.0

scripts/coverage-report.ts

@@ -1,154 +0,0 @@
-import { existsSync, readFileSync } from 'node:fs'
-
-interface FileStats {
-  lines: number
-  covered: number
-}
-
-interface UncoveredFile {
-  file: string
-  pct: number
-  missed: number
-}
-
-const lcovPath = process.argv[2] || 'coverage/playwright/coverage.lcov'
-
-if (!existsSync(lcovPath)) {
-  process.stdout.write(
-    '## 🔬 E2E Coverage\n\n> ⚠️ No coverage data found. Check the CI workflow logs.\n'
-  )
-  process.exit(0)
-}
-
-const lcov = readFileSync(lcovPath, 'utf-8')
-
-interface RecordAccum {
-  lf: number
-  lh: number
-  fnf: number
-  fnh: number
-  brf: number
-  brh: number
-}
-
-const fileRecords = new Map<string, RecordAccum>()
-let currentFile = ''
-
-for (const line of lcov.split('\n')) {
-  if (line.startsWith('SF:')) {
-    currentFile = line.slice(3)
-  } else if (line.startsWith('LF:')) {
-    const n = parseInt(line.slice(3), 10) || 0
-    const rec = fileRecords.get(currentFile) ?? {
-      lf: 0,
-      lh: 0,
-      fnf: 0,
-      fnh: 0,
-      brf: 0,
-      brh: 0
-    }
-    rec.lf = Math.max(rec.lf, n)
-    fileRecords.set(currentFile, rec)
-  } else if (line.startsWith('LH:')) {
-    const n = parseInt(line.slice(3), 10) || 0
-    const rec = fileRecords.get(currentFile) ?? {
-      lf: 0,
-      lh: 0,
-      fnf: 0,
-      fnh: 0,
-      brf: 0,
-      brh: 0
-    }
-    rec.lh = Math.max(rec.lh, n)
-    fileRecords.set(currentFile, rec)
-  } else if (line.startsWith('FNF:')) {
-    const n = parseInt(line.slice(4), 10) || 0
-    const rec = fileRecords.get(currentFile)
-    if (rec) rec.fnf = Math.max(rec.fnf, n)
-  } else if (line.startsWith('FNH:')) {
-    const n = parseInt(line.slice(4), 10) || 0
-    const rec = fileRecords.get(currentFile)
-    if (rec) rec.fnh = Math.max(rec.fnh, n)
-  } else if (line.startsWith('BRF:')) {
-    const n = parseInt(line.slice(4), 10) || 0
-    const rec = fileRecords.get(currentFile)
-    if (rec) rec.brf = Math.max(rec.brf, n)
-  } else if (line.startsWith('BRH:')) {
-    const n = parseInt(line.slice(4), 10) || 0
-    const rec = fileRecords.get(currentFile)
-    if (rec) rec.brh = Math.max(rec.brh, n)
-  }
-}
-
-let totalLines = 0
-let coveredLines = 0
-let totalFunctions = 0
-let coveredFunctions = 0
-let totalBranches = 0
-let coveredBranches = 0
-const fileStats = new Map<string, FileStats>()
-
-for (const [file, rec] of fileRecords) {
-  totalLines += rec.lf
-  coveredLines += rec.lh
-  totalFunctions += rec.fnf
-  coveredFunctions += rec.fnh
-  totalBranches += rec.brf
-  coveredBranches += rec.brh
-  fileStats.set(file, { lines: rec.lf, covered: rec.lh })
-}
-
-function pct(covered: number, total: number): string {
-  if (total === 0) return '—'
-  return ((covered / total) * 100).toFixed(1) + '%'
-}
-
-function bar(covered: number, total: number): string {
-  if (total === 0) return '—'
-  const p = (covered / total) * 100
-  if (p >= 80) return '🟢'
-  if (p >= 50) return '🟡'
-  return '🔴'
-}
-
-const lines: string[] = []
-lines.push('## 🔬 E2E Coverage')
-lines.push('')
-lines.push('| Metric | Covered | Total | Pct | |')
-lines.push('|---|--:|--:|--:|---|')
-lines.push(
-  `| Lines | ${coveredLines} | ${totalLines} | ${pct(coveredLines, totalLines)} | ${bar(coveredLines, totalLines)} |`
-)
-lines.push(
-  `| Functions | ${coveredFunctions} | ${totalFunctions} | ${pct(coveredFunctions, totalFunctions)} | ${bar(coveredFunctions, totalFunctions)} |`
-)
-lines.push(
-  `| Branches | ${coveredBranches} | ${totalBranches} | ${pct(coveredBranches, totalBranches)} | ${bar(coveredBranches, totalBranches)} |`
-)
-
-const uncovered: UncoveredFile[] = [...fileStats.entries()]
-  .filter(([, s]) => s.lines > 0)
-  .map(([file, s]) => ({
-    file: file.replace(/^.*\/src\//, 'src/'),
-    pct: s.lines > 0 ? (s.covered / s.lines) * 100 : 100,
-    missed: s.lines - s.covered
-  }))
-  .filter((f) => f.missed > 0)
-  .sort((a, b) => b.missed - a.missed)
-  .slice(0, 10)
-
-if (uncovered.length > 0) {
-  lines.push('')
-  lines.push('<details>')
-  lines.push('<summary>Top 10 files by uncovered lines</summary>')
-  lines.push('')
-  lines.push('| File | Coverage | Missed |')
-  lines.push('|---|--:|--:|')
-  for (const f of uncovered) {
-    lines.push(`| \`${f.file}\` | ${f.pct.toFixed(1)}% | ${f.missed} |`)
-  }
-  lines.push('')
-  lines.push('</details>')
-}
-
-process.stdout.write(lines.join('\n') + '\n')

scripts/coverage-slack-notify.ts

@@ -1,228 +0,0 @@
-import { existsSync, readFileSync } from 'node:fs'
-
-const TARGET = 80
-const MILESTONE_STEP = 5
-const BAR_WIDTH = 20
-
-interface CoverageData {
-  percentage: number
-  totalLines: number
-  coveredLines: number
-}
-
-interface SlackBlock {
-  type: 'section'
-  text: {
-    type: 'mrkdwn'
-    text: string
-  }
-}
-
-function parseLcovContent(content: string): CoverageData | null {
-  const perFile = new Map<string, { lf: number; lh: number }>()
-  let currentFile = ''
-
-  for (const line of content.split('\n')) {
-    if (line.startsWith('SF:')) {
-      currentFile = line.slice(3)
-    } else if (line.startsWith('LF:')) {
-      const n = parseInt(line.slice(3), 10) || 0
-      const entry = perFile.get(currentFile) ?? { lf: 0, lh: 0 }
-      entry.lf = Math.max(entry.lf, n)
-      perFile.set(currentFile, entry)
-    } else if (line.startsWith('LH:')) {
-      const n = parseInt(line.slice(3), 10) || 0
-      const entry = perFile.get(currentFile) ?? { lf: 0, lh: 0 }
-      entry.lh = Math.max(entry.lh, n)
-      perFile.set(currentFile, entry)
-    }
-  }
-
-  let totalLines = 0
-  let coveredLines = 0
-  for (const { lf, lh } of perFile.values()) {
-    totalLines += lf
-    coveredLines += lh
-  }
-
-  if (totalLines === 0) return null
-
-  return {
-    percentage: (coveredLines / totalLines) * 100,
-    totalLines,
-    coveredLines
-  }
-}
-
-function parseLcov(filePath: string): CoverageData | null {
-  if (!existsSync(filePath)) return null
-  return parseLcovContent(readFileSync(filePath, 'utf-8'))
-}
-
-function progressBar(percentage: number): string {
-  const clamped = Math.max(0, Math.min(100, percentage))
-  const filled = Math.round((clamped / 100) * BAR_WIDTH)
-  const empty = BAR_WIDTH - filled
-  return '█'.repeat(filled) + '░'.repeat(empty)
-}
-
-function formatPct(value: number): string {
-  return value.toFixed(1) + '%'
-}
-
-function formatDelta(delta: number): string {
-  const sign = delta >= 0 ? '+' : ''
-  return sign + delta.toFixed(1) + '%'
-}
-
-function crossedMilestone(prev: number, curr: number): number | null {
-  const prevBucket = Math.floor(prev / MILESTONE_STEP)
-  const currBucket = Math.floor(curr / MILESTONE_STEP)
-
-  if (currBucket > prevBucket) {
-    return currBucket * MILESTONE_STEP
-  }
-  return null
-}
-
-function buildMilestoneBlock(label: string, milestone: number): SlackBlock {
-  if (milestone >= TARGET) {
-    return {
-      type: 'section',
-      text: {
-        type: 'mrkdwn',
-        text: [
-          `🏆 *GOAL REACHED: ${label} coverage hit ${milestone}%!* 🏆`,
-          `\`${progressBar(milestone)}\` ${milestone}% ✅`,
-          'The team did it! 🎊🥳🎉'
-        ].join('\n')
-      }
-    }
-  }
-
-  const remaining = TARGET - milestone
-  return {
-    type: 'section',
-    text: {
-      type: 'mrkdwn',
-      text: [
-        `🎉🎉🎉 *MILESTONE: ${label} coverage hit ${milestone}%!*`,
-        `\`${progressBar(milestone)}\` ${milestone}% → ${TARGET}% target`,
-        `${remaining} percentage point${remaining !== 1 ? 's' : ''} to go!`
-      ].join('\n')
-    }
-  }
-}
-
-function parseArgs(argv: string[]): {
-  prUrl: string
-  prNumber: string
-  author: string
-} {
-  let prUrl = ''
-  let prNumber = ''
-  let author = ''
-
-  for (const arg of argv) {
-    if (arg.startsWith('--pr-url=')) prUrl = arg.slice('--pr-url='.length)
-    else if (arg.startsWith('--pr-number='))
-      prNumber = arg.slice('--pr-number='.length)
-    else if (arg.startsWith('--author=')) author = arg.slice('--author='.length)
-  }
-
-  return { prUrl, prNumber, author }
-}
-
-function formatCoverageRow(
-  label: string,
-  current: CoverageData,
-  baseline: CoverageData
-): string {
-  const delta = current.percentage - baseline.percentage
-  return `*${label}:*  ${formatPct(baseline.percentage)} → ${formatPct(current.percentage)}  (${formatDelta(delta)})`
-}
-
-function main() {
-  const { prUrl, prNumber, author } = parseArgs(process.argv.slice(2))
-
-  const unitCurrent = parseLcov('coverage/lcov.info')
-  const unitBaseline = parseLcov('temp/coverage-baseline/lcov.info')
-  const e2eCurrent = parseLcov('temp/e2e-coverage/coverage.lcov')
-  const e2eBaseline = parseLcov('temp/e2e-coverage-baseline/coverage.lcov')
-
-  const unitImproved =
-    unitCurrent !== null &&
-    unitBaseline !== null &&
-    unitCurrent.percentage > unitBaseline.percentage
-
-  const e2eImproved =
-    e2eCurrent !== null &&
-    e2eBaseline !== null &&
-    e2eCurrent.percentage > e2eBaseline.percentage
-
-  if (!unitImproved && !e2eImproved) {
-    process.exit(0)
-  }
-
-  const blocks: SlackBlock[] = []
-
-  const summaryLines: string[] = []
-  summaryLines.push(
-    `✅ *Coverage improved!* — <${prUrl}|PR #${prNumber}> by <https://github.com/${author}|${author}>`
-  )
-  summaryLines.push('')
-
-  if (unitCurrent && unitBaseline) {
-    summaryLines.push(formatCoverageRow('Unit', unitCurrent, unitBaseline))
-  }
-
-  if (e2eCurrent && e2eBaseline) {
-    summaryLines.push(formatCoverageRow('E2E', e2eCurrent, e2eBaseline))
-  }
-
-  summaryLines.push('')
-
-  if (unitCurrent) {
-    summaryLines.push(
-      `\`${progressBar(unitCurrent.percentage)}\` ${formatPct(unitCurrent.percentage)} unit → ${TARGET}% target`
-    )
-  }
-  if (e2eCurrent) {
-    summaryLines.push(
-      `\`${progressBar(e2eCurrent.percentage)}\` ${formatPct(e2eCurrent.percentage)} e2e → ${TARGET}% target`
-    )
-  }
-
-  blocks.push({
-    type: 'section',
-    text: {
-      type: 'mrkdwn',
-      text: summaryLines.join('\n')
-    }
-  })
-
-  if (unitCurrent && unitBaseline) {
-    const milestone = crossedMilestone(
-      unitBaseline.percentage,
-      unitCurrent.percentage
-    )
-    if (milestone !== null) {
-      blocks.push(buildMilestoneBlock('Unit test', milestone))
-    }
-  }
-
-  if (e2eCurrent && e2eBaseline) {
-    const milestone = crossedMilestone(
-      e2eBaseline.percentage,
-      e2eCurrent.percentage
-    )
-    if (milestone !== null) {
-      blocks.push(buildMilestoneBlock('E2E test', milestone))
-    }
-  }
-
-  const payload = { text: 'Coverage improved!', blocks }
-  process.stdout.write(JSON.stringify(payload))
-}
-
-main()

scripts/unified-report.js

@@ -1,9 +1,11 @@
+// @ts-check
 import { execFileSync } from 'node:child_process'
 import { existsSync } from 'node:fs'
 
-const args: string[] = process.argv.slice(2)
+const args = process.argv.slice(2)
 
-function getArg(name: string): string | undefined {
+/** @param {string} name */
+function getArg(name) {
   const prefix = `--${name}=`
   const arg = args.find((a) => a.startsWith(prefix))
   return arg ? arg.slice(prefix.length) : undefined
@@ -11,10 +13,11 @@ function getArg(name: string): string | undefined {
 
 const sizeStatus = getArg('size-status') ?? 'pending'
 const perfStatus = getArg('perf-status') ?? 'pending'
-const coverageStatus = getArg('coverage-status') ?? 'skip'
 
-const lines: string[] = []
+/** @type {string[]} */
+const lines = []
 
+// --- Size section ---
 if (sizeStatus === 'ready') {
   try {
     const sizeReport = execFileSync('node', ['scripts/size-report.js'], {
@@ -40,6 +43,7 @@ if (sizeStatus === 'ready') {
 
 lines.push('')
 
+// --- Perf section ---
 if (perfStatus === 'ready' && existsSync('test-results/perf-metrics.json')) {
   try {
     const perfReport = execFileSync(
@@ -68,33 +72,4 @@ if (perfStatus === 'ready' && existsSync('test-results/perf-metrics.json')) {
   lines.push('> ⏳ Performance tests in progress…')
 }
 
-if (coverageStatus === 'ready' && existsSync('temp/coverage/coverage.lcov')) {
-  try {
-    const coverageReport = execFileSync(
-      'pnpm',
-      [
-        'exec',
-        'tsx',
-        'scripts/coverage-report.ts',
-        'temp/coverage/coverage.lcov'
-      ],
-      { encoding: 'utf-8' }
-    ).trimEnd()
-    lines.push('')
-    lines.push(coverageReport)
-  } catch {
-    lines.push('')
-    lines.push('## 🔬 E2E Coverage')
-    lines.push('')
-    lines.push(
-      '> ⚠️ Failed to render coverage report. Check the CI workflow logs.'
-    )
-  }
-} else if (coverageStatus === 'failed') {
-  lines.push('')
-  lines.push('## 🔬 E2E Coverage')
-  lines.push('')
-  lines.push('> ⚠️ Coverage collection failed. Check the CI workflow logs.')
-}
-
 process.stdout.write(lines.join('\n') + '\n')

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts

@@ -43,11 +43,6 @@ const MockFormDropdownInput = {
     '<button class="mock-dropdown-trigger" @click="$emit(\'select-click\', $event)">Open</button>'
 }
 
-const MockPopover = {
-  name: 'Popover',
-  template: '<div><slot /></div>'
-}
-
 interface MountDropdownOptions {
   searcher?: (
     query: string,
@@ -72,7 +67,6 @@ function mountDropdown(
       plugins: [PrimeVue, i18n],
       stubs: {
         FormDropdownInput: MockFormDropdownInput,
-        Popover: MockPopover,
         FormDropdownMenu: MockFormDropdownMenu
       }
     }
@@ -80,6 +74,18 @@ function mountDropdown(
   return { ...result, user }
 }
 
+async function openDropdown(
+  container: Element,
+  user: ReturnType<typeof userEvent.setup>
+) {
+  // eslint-disable-next-line testing-library/no-node-access
+  const trigger = container.querySelector(
+    '.mock-dropdown-trigger'
+  ) as HTMLElement
+  await user.click(trigger)
+  await flushPromises()
+}
+
 function getMenuItems(): FormDropdownItem[] {
   const menuEl = screen.getByTestId('dropdown-menu')
   return JSON.parse(menuEl.getAttribute('data-items') ?? '[]')
@@ -88,11 +94,11 @@ function getMenuItems(): FormDropdownItem[] {
 describe('FormDropdown', () => {
   describe('filteredItems updates when items prop changes', () => {
     it('updates displayed items when items prop changes', async () => {
-      const { rerender } = mountDropdown([
+      const { rerender, container, user } = mountDropdown([
         createItem('input-0', 'video1.mp4'),
         createItem('input-1', 'video2.mp4')
       ])
-      await flushPromises()
+      await openDropdown(container, user)
 
       expect(getMenuItems()).toHaveLength(2)
 
@@ -110,8 +116,10 @@ describe('FormDropdown', () => {
     })
 
     it('updates when items change but IDs stay the same', async () => {
-      const { rerender } = mountDropdown([createItem('1', 'alpha')])
-      await flushPromises()
+      const { rerender, container, user } = mountDropdown([
+        createItem('1', 'alpha')
+      ])
+      await openDropdown(container, user)
 
       await rerender({ items: [createItem('1', 'beta')] })
       await flushPromises()
@@ -120,8 +128,8 @@ describe('FormDropdown', () => {
     })
 
     it('updates when switching between empty and non-empty items', async () => {
-      const { rerender } = mountDropdown([])
-      await flushPromises()
+      const { rerender, container, user } = mountDropdown([])
+      await openDropdown(container, user)
 
       expect(getMenuItems()).toHaveLength(0)
 
@@ -165,7 +173,6 @@ describe('FormDropdown', () => {
     await flushPromises()
 
     expect(searcher).not.toHaveBeenCalled()
-    expect(getMenuItems().map((item) => item.id)).toEqual(['3', '4'])
   })
 
   it('runs filtering when dropdown opens', async () => {
@@ -180,9 +187,7 @@ describe('FormDropdown', () => {
     )
     await flushPromises()
 
-    // eslint-disable-next-line testing-library/no-node-access
-    await user.click(container.querySelector('.mock-dropdown-trigger')!)
-    await flushPromises()
+    await openDropdown(container, user)
 
     expect(searcher).toHaveBeenCalled()
     expect(getMenuItems().map((item) => item.id)).toEqual(['keep'])

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { computedAsync, refDebounced } from '@vueuse/core'
-import Popover from 'primevue/popover'
-import { computed, ref, useTemplateRef } from 'vue'
+import { computedAsync, onClickOutside, refDebounced } from '@vueuse/core'
+import type { CSSProperties } from 'vue'
+import { computed, inject, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
+import { OverlayAppendToKey } from '@/composables/useTransformCompatOverlayProps'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import { cn } from '@/utils/tailwindUtil'
 
 import type {
   FilterOption,
@@ -16,6 +17,7 @@ import type {
 import FormDropdownInput from './FormDropdownInput.vue'
 import FormDropdownMenu from './FormDropdownMenu.vue'
 import { defaultSearcher, getDefaultSortOptions } from './shared'
+import { MENU_HEIGHT, MENU_WIDTH } from './types'
 import type { FormDropdownItem, LayoutMode, SortOption } from './types'
 
 interface Props {
@@ -51,7 +53,6 @@ interface Props {
 }
 
 const { t } = useI18n()
-const overlayProps = useTransformCompatOverlayProps()
 
 const {
   placeholder,
@@ -95,8 +96,10 @@ const baseModelSelected = defineModel<Set<string>>('baseModelSelected', {
 const isOpen = defineModel<boolean>('isOpen', { default: false })
 
 const toastStore = useToastStore()
-const popoverRef = ref<InstanceType<typeof Popover>>()
 const triggerRef = useTemplateRef('triggerRef')
+const dropdownRef = useTemplateRef('dropdownRef')
+
+const shouldTeleport = inject(OverlayAppendToKey, undefined) === 'body'
 
 const maxSelectable = computed(() => {
   if (multiple === true) return Infinity
@@ -142,18 +145,63 @@ function internalIsSelected(item: FormDropdownItem, index: number): boolean {
   return isSelected(selected.value, item, index)
 }
 
-const toggleDropdown = (event: Event) => {
+const MENU_HEIGHT_WITH_GAP = MENU_HEIGHT + 8
+const openUpward = ref(false)
+const fixedPosition = ref({ top: 0, left: 0 })
+
+const teleportStyle = computed<CSSProperties | undefined>(() => {
+  if (!shouldTeleport) return undefined
+  const pos = fixedPosition.value
+  return openUpward.value
+    ? {
+        position: 'fixed',
+        left: `${pos.left}px`,
+        bottom: `${window.innerHeight - pos.top}px`,
+        paddingBottom: '0.5rem'
+      }
+    : {
+        position: 'fixed',
+        left: `${pos.left}px`,
+        top: `${pos.top}px`,
+        paddingTop: '0.5rem'
+      }
+})
+
+function toggleDropdown() {
   if (disabled) return
-  if (popoverRef.value && triggerRef.value) {
-    popoverRef.value.toggle?.(event, triggerRef.value)
-    isOpen.value = !isOpen.value
+  if (!isOpen.value && triggerRef.value) {
+    const rect = triggerRef.value.getBoundingClientRect()
+
+    const spaceBelow = window.innerHeight - rect.bottom
+    const spaceAbove = rect.top
+    openUpward.value =
+      spaceBelow < MENU_HEIGHT_WITH_GAP && spaceAbove > spaceBelow
+
+    if (shouldTeleport) {
+      const left = Math.max(
+        0,
+        Math.min(rect.right - MENU_WIDTH, window.innerWidth - MENU_WIDTH)
+      )
+      fixedPosition.value = {
+        top: openUpward.value
+          ? Math.max(MENU_HEIGHT_WITH_GAP, rect.top)
+          : Math.min(rect.bottom, window.innerHeight - MENU_HEIGHT_WITH_GAP),
+        left
+      }
+    }
   }
+  isOpen.value = !isOpen.value
 }
 
-const closeDropdown = () => {
-  if (popoverRef.value) {
-    popoverRef.value.hide?.()
-    isOpen.value = false
+function closeDropdown() {
+  isOpen.value = false
+}
+
+onClickOutside(triggerRef, closeDropdown, { ignore: [dropdownRef] })
+
+function handleEscape(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    closeDropdown()
   }
 }
 
@@ -192,7 +240,7 @@ function handleSelection(item: FormDropdownItem, index: number) {
 </script>
 
 <template>
-  <div ref="triggerRef">
+  <div ref="triggerRef" class="relative" @keydown="handleEscape">
     <FormDropdownInput
       :files
       :is-open
@@ -207,42 +255,41 @@ function handleSelection(item: FormDropdownItem, index: number) {
       @select-click="toggleDropdown"
       @file-change="handleFileChange"
     />
-    <Popover
-      ref="popoverRef"
-      :dismissable="true"
-      :close-on-escape="true"
-      :append-to="overlayProps.appendTo"
-      unstyled
-      :pt="{
-        root: {
-          class: 'absolute z-50'
-        },
-        content: {
-          class: ['bg-transparent border-none p-0 pt-2 rounded-lg shadow-lg']
-        }
-      }"
-      @hide="isOpen = false"
-    >
-      <FormDropdownMenu
-        v-model:filter-selected="filterSelected"
-        v-model:layout-mode="layoutMode"
-        v-model:sort-selected="sortSelected"
-        v-model:search-query="searchQuery"
-        v-model:ownership-selected="ownershipSelected"
-        v-model:base-model-selected="baseModelSelected"
-        :filter-options
-        :sort-options
-        :show-ownership-filter
-        :ownership-options
-        :show-base-model-filter
-        :base-model-options
-        :disabled
-        :items="sortedItems"
-        :is-selected="internalIsSelected"
-        :max-selectable
-        @close="closeDropdown"
-        @item-click="handleSelection"
-      />
-    </Popover>
+    <Teleport to="body" :disabled="!shouldTeleport">
+      <div
+        v-if="isOpen"
+        ref="dropdownRef"
+        :class="
+          cn(
+            'z-50 rounded-lg border-none bg-transparent p-0 shadow-lg',
+            !shouldTeleport && 'absolute left-0',
+            !shouldTeleport &&
+              (openUpward ? 'bottom-full pb-2' : 'top-full pt-2')
+          )
+        "
+        :style="teleportStyle"
+      >
+        <FormDropdownMenu
+          v-model:filter-selected="filterSelected"
+          v-model:layout-mode="layoutMode"
+          v-model:sort-selected="sortSelected"
+          v-model:search-query="searchQuery"
+          v-model:ownership-selected="ownershipSelected"
+          v-model:base-model-selected="baseModelSelected"
+          :filter-options
+          :sort-options
+          :show-ownership-filter
+          :ownership-options
+          :show-base-model-filter
+          :base-model-options
+          :disabled
+          :items="sortedItems"
+          :is-selected="internalIsSelected"
+          :max-selectable
+          @close="closeDropdown"
+          @item-click="handleSelection"
+        />
+      </div>
+    </Teleport>
   </div>
 </template>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -61,6 +61,7 @@ const theButtonStyle = computed(() =>
     "
   >
     <button
+      data-testid="form-dropdown-trigger"
       :class="
         cn(
           theButtonStyle,

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

@@ -13,6 +13,7 @@ import type {
 import FormDropdownMenuActions from './FormDropdownMenuActions.vue'
 import FormDropdownMenuFilter from './FormDropdownMenuFilter.vue'
 import FormDropdownMenuItem from './FormDropdownMenuItem.vue'
+import { MENU_HEIGHT, MENU_WIDTH } from './types'
 import type { FormDropdownItem, LayoutMode, SortOption } from './types'
 
 interface Props {
@@ -97,7 +98,9 @@ const virtualItems = computed<VirtualDropdownItem[]>(() =>
 
 <template>
   <div
-    class="flex h-[640px] w-103 flex-col rounded-lg bg-component-node-background pt-4 outline -outline-offset-1 outline-node-component-border"
+    data-testid="form-dropdown-menu"
+    class="flex flex-col rounded-lg bg-component-node-background pt-4 outline -outline-offset-1 outline-node-component-border"
+    :style="{ height: `${MENU_HEIGHT}px`, width: `${MENU_WIDTH}px` }"
     data-capture-wheel="true"
   >
     <FormDropdownMenuFilter

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/types.ts

@@ -28,5 +28,10 @@ export interface SortOption<TId extends string = string> {
 
 export type LayoutMode = 'list' | 'grid' | 'list-small'
 
+/** Height of FormDropdownMenu in pixels (matches h-[640px] in template). */
+export const MENU_HEIGHT = 640
+/** Width of FormDropdownMenu in pixels (matches w-103 = 26rem = 416px in template). */
+export const MENU_WIDTH = 412
+
 export const AssetKindKey: InjectionKey<ComputedRef<AssetKind | undefined>> =
   Symbol('assetKind')