SB+ Erroneous full screen popup with connection initiations

[BrianCarter2]

I’ll try to make this bug report as complete as I can. Bottom line, a specific popup from the ScoutBook plus roster function needs a close button added on the mobile version.

I found the bug on iPhone 17, DuckDuckGo, but repeated the bug in Firefox desktop browser with Developer Tools in mobile simulator for all screen widths 992px and below.

I initiated a connection between a Scout and father.

Desktop view:

Mobile view:

On desktop, this is how the resulting popup looks. Normal partial screen window with a close X in the top right.

However, on mobile, it goes to a full screen popup with no X or back button.

You can tell it’s a popup 2 ways. First, pinch zoom shows you the underlying page.

Second, one finger swipe does go back, but it goes back to the roster, not the underlying profile page.

The mobile version of the popup needs an X or it needs its size limited to less than full screen so you can click out of it.

AI hints at fixing the bug when I fed it the HTML, for what it’s worth. Maybe it can steer the developers in the right direction:

How to fix it (for a developer):

To resolve this, the following changes are needed in the source code:

1. Add the Close Button: Ensure the ant-modal-close button is explicitly included in the HTML, or that the property closable={true} is set if using a React-based version of this library.

2. Adjust Mobile CSS: Modify the CSS to prevent 100% height on mobile. Specifically, check for media queries (e.g., @media (max-width: 576px)) that might be setting the modal to top: 0; left: 0; margin: 0;.

3. Ensure Z-Index: The code defines --ant-5-sbl-z-index-popup-base: 1000. If the close button exists but is hidden, it may be because the modal body is layered on top of it.

Thanks for passing it along.

[DonovanMcNeil]

@BrianCarter2 we will look at this