Skip to content

fix(popover): prevent right/bottom overflow and add screenGap parameter#4268

Closed
Copilot wants to merge 4 commits intodevelopfrom
copilot/fix-popover-right-side-constraint
Closed

fix(popover): prevent right/bottom overflow and add screenGap parameter#4268
Copilot wants to merge 4 commits intodevelopfrom
copilot/fix-popover-right-side-constraint

Conversation

Copy link
Contributor

Copilot AI commented Feb 7, 2026

Popover currently constrains only left-side overflow (Math.max(left, 0)), allowing content to overflow right and bottom edges of the viewport.

Changes

  • Add screenGap property (default: 0) - configurable spacing between popover and screen edges when constrained
  • Fix position calculation - constrain all four sides:
    // Before: only left side constrained
    const style = `top:${Math.max(top, 0)}px;left:${Math.max(left, 0)}px;`;
    
    // After: all sides constrained with edge case handling
    const maxLeft = Math.max(screenGap, windowWidth - contentWidth - screenGap);
    const maxTop = Math.max(screenGap, windowHeight - contentHeight - screenGap);
    const constrainedLeft = Math.min(Math.max(left, screenGap), maxLeft);
    const constrainedTop = Math.min(Math.max(top, screenGap), maxTop);
  • Handle viewport overflow - when popover exceeds viewport dimensions, Math.max(screenGap, ...) ensures positioning never goes negative
  • Apply to both platforms - changes implemented in both packages/components/popover/ (miniprogram) and packages/uniapp-components/popover/ (uniapp)

Usage

<!-- Default behavior (backward compatible) -->
<t-popover placement="top-right" visible="{{visible}}">
  <view slot="content">Content won't overflow screen edges</view>
</t-popover>

<!-- Custom spacing from edges -->
<t-popover screen-gap="16" placement="top-right" visible="{{visible}}">
  <view slot="content">Content keeps 16px from edges</view>
</t-popover>

Backward compatible - default screenGap: 0 maintains existing behavior.

Original prompt

This section details on the original issue you should resolve

<issue_title>[t-popover] 气泡支持了不超出左侧屏幕,但没有支持不超出右侧屏幕</issue_title>
<issue_description>### 这个功能解决了什么问题

当前气泡在超出左侧屏幕时默认紧靠左侧屏幕,但是超出右侧屏幕时没有紧靠右侧

你建议的方案是什么

  1. 气泡超出右侧时紧靠右侧屏幕。
  2. 提供一个参数来调整紧靠屏幕时与屏幕的间距</issue_description>

Comments on the Issue (you are @copilot in this section)


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI and others added 3 commits February 7, 2026 13:20
…eter

Co-authored-by: Wesley-0808 <69622989+Wesley-0808@users.noreply.github.com>
Co-authored-by: Wesley-0808 <69622989+Wesley-0808@users.noreply.github.com>
Co-authored-by: Wesley-0808 <69622989+Wesley-0808@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix t-popover to adhere to right screen boundary fix(popover): prevent right/bottom overflow and add screenGap parameter Feb 7, 2026
Copilot AI requested a review from Wesley-0808 February 7, 2026 13:27
@Wesley-0808 Wesley-0808 closed this Feb 7, 2026
@Wesley-0808 Wesley-0808 deleted the copilot/fix-popover-right-side-constraint branch February 7, 2026 13:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[t-popover] 气泡支持了不超出左侧屏幕,但没有支持不超出右侧屏幕

2 participants