mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
25e1b0e708
## Summary Keep the restored job details popover visible when the job history sidebar is docked on the left edge of the workspace. ## Changes - **What**: Replace the fixed `right`-based hover popover positioning with viewport-aware `left` positioning so the popover opens on the side with available space, reuse that logic in both `JobAssetsList` and `QueueJobItem`, and add coverage for left-edge/right-edge placement plus the job history sidebar integration. ## Review Focus Please verify the hover popover opens on-screen for left-docked job history, and that queue overlay / legacy queue row behavior still matches the intended hover handoff. ## Screenshots (if applicable) N/A ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9679-fix-keep-job-details-popover-on-screen-in-sidebar-31e6d73d3650816d9e7ffb0749430218) by [Unito](https://www.unito.io) --------- Co-authored-by: bymyself <cbyrne@comfy.org>
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
|
|
import { getHoverPopoverPosition } from './getHoverPopoverPosition'
|
|
|
|
describe('getHoverPopoverPosition', () => {
|
|
it('places the popover to the right when space is available', () => {
|
|
const position = getHoverPopoverPosition(
|
|
{ top: 100, left: 40, right: 240 },
|
|
1280
|
|
)
|
|
expect(position).toEqual({ top: 100, left: 248 })
|
|
})
|
|
|
|
it('places the popover to the left when right space is insufficient', () => {
|
|
const position = getHoverPopoverPosition(
|
|
{ top: 100, left: 980, right: 1180 },
|
|
1280
|
|
)
|
|
expect(position).toEqual({ top: 100, left: 672 })
|
|
})
|
|
|
|
it('clamps the top to viewport padding when rect.top is near the top edge', () => {
|
|
const position = getHoverPopoverPosition(
|
|
{ top: 2, left: 40, right: 240 },
|
|
1280
|
|
)
|
|
expect(position).toEqual({ top: 8, left: 248 })
|
|
})
|
|
|
|
it('clamps left to viewport padding when fallback would go off-screen', () => {
|
|
const position = getHoverPopoverPosition(
|
|
{ top: 100, left: 100, right: 300 },
|
|
320
|
|
)
|
|
expect(position).toEqual({ top: 100, left: 8 })
|
|
})
|
|
|
|
it('prefers right when both sides have equal space', () => {
|
|
const position = getHoverPopoverPosition(
|
|
{ top: 200, left: 340, right: 640 },
|
|
1280
|
|
)
|
|
expect(position).toEqual({ top: 200, left: 648 })
|
|
})
|
|
|
|
it('falls back to left when right space is less than popover width', () => {
|
|
const position = getHoverPopoverPosition(
|
|
{ top: 100, left: 600, right: 1000 },
|
|
1280
|
|
)
|
|
expect(position).toEqual({ top: 100, left: 292 })
|
|
})
|
|
|
|
it('handles narrow viewport where popover barely fits', () => {
|
|
const position = getHoverPopoverPosition(
|
|
{ top: 50, left: 8, right: 100 },
|
|
316
|
|
)
|
|
expect(position).toEqual({ top: 50, left: 8 })
|
|
})
|
|
})
|