Popup closes too quickly on some screens

[perfectly-preserved-pie]

https://www.reddit.com/r/LARentals/comments/z4jhm3/i_made_an_interactive_map_of_la_county_rental/lvu6x69/

Among other reports. Seems to be affecting only macOS.

I believe it has something to do with the brittle resizing logic here:

larentals/assets/javascript/popup.js

Lines 331 to 339 in cce993f

	// Bind the popup to the layer and set the max height and width based on the screen size
	layer.bindPopup(
	popupContent,
	{
	maxHeight: window.innerWidth < 768 ? 410 : 650,
	maxWidth: window.innerWidth < 768 ? 175 : 300,
	closeButton: false,
	},
	);

[perfectly-preserved-pie]

f67da7d in an attempt to fix it. This might be an issue with the MacBook trackpad causing a second "ghost" click which closes the popup.

[perfectly-preserved-pie]

Yea that didn't work, but I got a video of the behavior in action finally: https://imgur.com/a/4PFLpV8

It's almost certainly because the popup is too big for the map bounds.

[perfectly-preserved-pie]

I modified the popup size in 8e1d553 but honestly, the fix is just to maximize the window. Idk how to make this any more responsive than it already is, lol.

[perfectly-preserved-pie]

I got another report of this issue. Again, macOS. And again, the resolution was to maximize the browser window.

I'm reopening this issue but still dunno how to fix it.

[perfectly-preserved-pie]

Just experienced this on W11 with Firefox. The browser is maximized but the popup closes too quickly.

It seems like the X and Y width isn't being enforced.

Maybe I need to flex/max the map card box for additional space? There's some unused space.

[perfectly-preserved-pie]

Popup resizes perfectly on the first try on mobile, but doesn't on desktop. What the hell