Provide a way to easily close options panel

[georapbox]

Description

In mobile views, when the options panel is open and options are expanded, it's a bit difficult for the user to close the panel. The panel can be closed if the user clicks outside, but It in order to achieve this they need to collapse one or more options, so that the panel's height becomes smaller and the clickable area increases.

Please see attached screenshot. Red rectangles represent the clickable areas.

[georapbox]

Would you mind if I created a PR for this one with a solution similar to the provided screenshot below?

[tomayac]

Oh, this looks like a regression since I changed the sidebar width (

SVGcode/src/css/style.css

Line 354 in 31eb06e

min-width: var(--sidebar-width);

) (it was a hard-coded width before). Now the "Reset All" button consumes the entire space.

The actual idea was to make the summary occupy the entire space that is not the sidebar when it's open, so the user can click anywhere (they actually click the summary, but don't realize it) to close the sidebar (

SVGcode/src/css/style.css

Lines 193 to 204 in 31eb06e

	/* Make the summary occupy the whole space so clicking anywhere closes. */
	details.main[open] > summary {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: var(--100vh);
	cursor: auto;
	z-index: -1;
	opacity: 0;
	}
	}

).

I'm not opposed to adding an explicit "Close" button, so the user can either click "anywhere" or use the button.

I'd be happy to merge a PR that tackles this. Thanks in advance!

[georapbox]

You're right, the summary is indeed occupying the whole space, although invisible. And from technical perspective, it works fine. The actual "problem" is that when the details inside the sidebar are expanded, they take up the whole space and the remaining summary clickable area is very small. Therefore, as a user I have to collapse one or two details elements so that I can click the summary and the sidebar to close. That's why I came up with the idea of having a close button that is straightforward and the user cannot miss.

I will prepare a PR and we can discuss further.

Thanks!

[tomayac]

Fixed via #38.