danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: popover on mobile going over edge

Browse source
This commit is contained in:
arabcoders 2026-01-16 19:20:27 +03:00
parent 45e27003c1
commit d87995c4b0
1 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/app/components/Popover.vue
View file

@ -203,16 +203,18 @@ const updatePosition = () => {
return return
} }
const viewportWidth = window.innerWidth
const viewportHeight = window.innerHeight
const constrainedMaxWidth = Math.min(props.maxWidth, viewportWidth * 0.96)
popover.value.style.minWidth = `${props.minWidth}px` popover.value.style.minWidth = `${props.minWidth}px`
popover.value.style.maxWidth = `${props.maxWidth}px` popover.value.style.maxWidth = `${constrainedMaxWidth}px`
popover.value.style.maxHeight = `${props.maxHeight}px` popover.value.style.maxHeight = `${props.maxHeight}px`
popover.value.style.overflowY = 'auto' popover.value.style.overflowY = 'auto'
const triggerRect = triggerRef.value.getBoundingClientRect() const triggerRect = triggerRef.value.getBoundingClientRect()
const popoverRect = popover.value.getBoundingClientRect() const popoverRect = popover.value.getBoundingClientRect()
const offset = props.offset const offset = props.offset
const viewportWidth = window.innerWidth
const viewportHeight = window.innerHeight
let effectivePlacement = props.placement let effectivePlacement = props.placement
@ -263,7 +265,7 @@ const updatePosition = () => {
top: `${clampedTop}px`, top: `${clampedTop}px`,
left: `${clampedLeft}px`, left: `${clampedLeft}px`,
minWidth: `${props.minWidth}px`, minWidth: `${props.minWidth}px`,
maxWidth: `${props.maxWidth}px`, maxWidth: `${constrainedMaxWidth}px`,
maxHeight: `${props.maxHeight}px`, maxHeight: `${props.maxHeight}px`,
overflowY: 'auto' overflowY: 'auto'
} }