Minimize / Auto-Hide "maps-routing-control leaflet-control" and Improvement

[ant0nwax]

I started using nextcloud maps integrated with mapbox to replace google maps :)
I came across one issue when I use the maps:
The leaflet where I set "Start" and "Destination" does cover the screen in any case.
It is not a big issue when you use a Desktop with a FullHD resolution.
It is a REALLY BIG issue when you try to use the mobile view on Android
The leaflet covers nearly ALL of the screen

There are two independent issues:

1. The (right) sidebar hamburger menu covers the "bar-button v-popper--has-tooltip" Find directions button, when you are on portrait mode on Android in a App Window, the only workaround at the moment is to temporarily tilt the phone to landscape mode and then you can press the Find directions button, that means the maximum size of the leaflet must be corrected by substracting the size of the "button-vue__icon" class="icon icon-menu-sidebar"

2. It would be REALLY NICE TO HAVE something like a minimize or hide of the search after the route is calculated. I attach a screen that you see how much the leaflet uses... If you would use the tool for navigation (you see your GPS coordinates as a blue spot) and could follow the track... but the issue is that the route displayed in text format covers the complete maps and so the maps app is still unusable as navigation replacement for OSM+ :) My suggestion would be: why do we not place the whole search in the (right) sidebar... in case of Navigation the (right) sidebar is usually empty in my setup.

Thank you for your kind support whoever will work on this one day.

[tacruc]

@ant0nwax do you have some css experience? I tired some stuff, but nothing which I produced convinced me.
I thought into this direction:

/* Inline #367 | http://localhost:8080/index.php/apps/maps/ */

[data-v-3074bd5c] .leaflet-left {
/* margin-left: 52; /
/ margin-left: 52px; */
margin-left: 0;
}

[data-v-3074bd5c] .leaflet-control {
/* margin-left: 0px; */
}

/* Inline #304 | http://localhost:8080/index.php/apps/maps/ */

.content[data-v-f8d5ac8e] * {
/* box-sizing: block; */
box-sizing: border-box;
}

/* Inline #364 | http://localhost:8080/index.php/apps/maps/ */

.leaflet-top, .leaflet-bottom {
/* 52px: ; */
\35 2px: ;
}

.leaflet-top .leaflet-control {
/* margin-top: 10px; */
margin-top: 0px;
}

.leaflet-top {
width: 100%;
}

/* Inline #335 | http://localhost:8080/index.php/apps/maps/ */

.maps-search-control[data-v-5c622222] {
/* width: 350px; */
width: 100%;
background: white;
margin: 0 0;
}

.maps-search-control #search[data-v-5c622222] {
margin: ;
margin-left: 52px;
margin: ;
}

/* Element | http://localhost:8080/index.php/apps/maps/ */

.maps-search-control {
/* margin-left: ß; */
margin-left: 0px;
margin-right: 0px;
}

/* Element | http://localhost:8080/index.php/apps/maps/ */

div.leaflet-top:nth-child(1) {
padding-right: 5px;
}

/* Element | http://localhost:8080/index.php/apps/maps/ */

#search {
margin-right: 52px;
padding-top: 10px;
padding-bottom: 5px;
}

And

[ant0nwax]

hi @tacruc
am a solution integrator and not (yet) a developer, I like your idea as it seems to solve the hurdle taht I need to use landscape mode... did you change to landscape mode and see that it does not break anything?
about experience, I edited a CSS file once in an open source app and understood that it is not how we work :)
so there is this GitHub branch solution instead :)

[tacruc]

#1082

[ant0nwax]

Thank you very much @tacruc
now I am curious when the Nextcloud will Notfiy me and then I will give you feedback after updating and testing