[Global] Prevent user menu from disappearing behind page elements

[2Abendsegler]

Describe the bug

The user menu disappears behind the map icons on Search Map.

To Reproduce

1. https://www.geocaching.com/play/map?
2. Choose user menu

Expected behavior

No response

OS

Windows

Browser

Firefox

GClh Version

0.17.14

Additional context

No response

[2Abendsegler]

@DieBatzen
Kannst du dir das vielleicht mal ansehen?
Hatten wir nicht vor einigen Wochen etwas geändert weil Map Icons hinter anderen verschwunden sind?

[DieBatzen]

@DieBatzen Kannst du dir das vielleicht mal ansehen? Hatten wir nicht vor einigen Wochen etwas geändert weil Map Icons hinter anderen verschwunden sind?

Schaue ich mir an.

[2Abendsegler]

Auf der Treasure Seite drängelt sich auch ein Button in den Vordergrund.

[DieBatzen]

Ich denke, ich habe eine Lösung gefunden.

Für unseren Container gclh_nav .wrapper, in dem der alte Header liegt, ist standardmäßig kein z-index festgelegt.
Im Falle der Search Map wird er von uns auf einen Wert von 1006 gesetzt, sonst ist der Wert immer auto.
Dem User Menu wird dann jeweils dieser z-index verebt.

Bei den Treasures ist der z-index des Settings-Buttons 100, so auch der des User Menus.
Im Ergebnis wird das User Menu überlagert.

Auf der Search Map ist der Wert für das User Menu 1006, vererbt vom gclh_nav.wrapper Container.
Der des Containers unserer Map Buttons oben rechts ist 2001, von uns gesetzt.
Von daher überlagern die Map Buttons das User Menu.

Der Wert von 2001 für die Map Buttons musste gesetzt werden, da sonst das Auswahlmenü der Karten im Leaflet Control Layer von den Buttons der rechten Seite (z-index=2000) überdeckt werden:

Das war entweder beim Wiederherstellen der Search Map Features oder beim Hinzufügen der Anzeigeoptionen.
So oder so, das User Menu wurde dabei nicht überlagert. Diesen Effekt müsste eine Änderung im Backend der letzten Zeit verursacht haben.

Genug der Vorrede, kommen wir zur Lösung.
Das hat mich doch einiges an Versuchen gekostet, dabei ist es so einfach:

gclh_nav .wrapper {
    z-index: 9000;
}

Der Wert des z-index muss dabei nur groß genug gewählt werden. Dann kann kein Element, egal auf welcher Seite, das User Menu (welches diesen z-index erbt) überdecken.
Den Wert 9000 habe ich mir vom neuen Header geliehen, der auf allen Seiten funktioniert.

Den PR mit der Anpassung lade ich gleich hoch.

[2Abendsegler]

@DieBatzen
Wir haben hier etwas übersehen.

Der Filter Screen wird so nicht mehr vollständig angezeigt. Er wird oben vom Header überlagert, so dass beispielsweise der Button zum Schließen nicht mehr angewählt werden kann. Wir haben einen z-index von 9000 gesetzt. Hier wird aber nur ein z-index von 3000 verwendet, glaube ich.

Kannst du dir das bitte nochmal ansehen?

[DieBatzen]

Tatsächlich.
Ein z-index von 2500 für den Header reicht zur Behebung des ursprünglichen Issues völlig aus und lässt auch den Filter auf der Search Map wieder in den Vordergrund.