UX: fix #2484 (although a bit hacky)

public/css/index-tailwind-output.css

@@ -1351,10 +1351,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   float: left;
 }
 
-.-m-4 {
-  margin: -1rem;
-}
-
 .m-0 {
   margin: 0px;
 }
@@ -2348,6 +2344,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   flex-grow: 1;
 }
 
+.grow-0 {
+  flex-grow: 0;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }

src/UI/BigComponents/VisualFeedbackPanel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   /**
    * The visual feedback panel gives visual (and auditive) feedback on the main map view
+   * This is an accessibility feature for people with screen readers
    */
 
   import Translations from "../i18n/Translations"

src/UI/ThemeViewGUI.svelte

@@ -78,6 +78,8 @@
   let viewport: UIEventSource<HTMLDivElement> = new UIEventSource<HTMLDivElement>(undefined)
   let mapproperties: MapProperties = state.mapProperties
   let searchOpened = state.searchState.showSearchDrawer
+  let isOnline = IsOnline.isOnline
+  let searchIsOpened = state.guistate.pageStates.search
 
   let metatags = state.userRelatedState.preferencesAsTags
   Orientation.singleton.startMeasurements()
@@ -183,7 +185,6 @@
     mapIsDragged.ping()
   }
 
-  let isOnline = IsOnline.isOnline
 </script>
 
 <main>
@@ -330,12 +331,14 @@
     <InsetSpacer height={AndroidPolyfill.getInsetSizes().bottom}/>
   </div>
 
+  <!-- Search results -->
   <DrawerRight shown={state.searchState.showSearchDrawer}>
     <SearchResults {state} />
   </DrawerRight>
 
   <!-- Top components -->
   <div class="z-4 pointer-events-none absolute left-0 top-0 w-full">
+    <!-- Grayed out top bar with menu button, theme intro and search bar (+ search button   -->
     <div
       id="top-bar"
       class="bg-black-light-transparent pointer-events-auto flex flex-wrap items-center justify-between px-4 py-1"
@@ -399,6 +402,7 @@
       </If>
     </div>
 
+    <!-- Panel for screenreader users -->
     <div class="pointer-events-auto float-right mt-1 flex flex-col px-1 max-[480px]:w-full sm:m-2">
       <If condition={state.visualFeedback}>
         {#if $selectedElement === undefined}
@@ -409,8 +413,8 @@
       </If>
     </div>
 
-    <div class="float-left m-1 flex flex-col sm:mt-2">
+    <!-- Current view tools: compass, uploading images counter, extra link, pending changes, ... -->
-      <!-- Current view tools -->
+    <div class="float-left m-1 flex flex-col sm:mt-2 sm:block" style="transition: color" class:hidden={$searchIsOpened}>
       {#if currentViewLayer?.tagRenderings && currentViewLayer.hasDefaultIcon()}
         <MapControlButton
           on:click={() => {
@@ -446,6 +450,7 @@
       {/if}
     </div>
 
+    <!-- 'Data is loading' panel -->
     <div class="flex w-full flex-col items-center justify-center">
       <!-- Flex and w-full are needed for the positioning -->
       <!-- Centermessage -->
@@ -454,6 +459,7 @@
     </div>
   </div>
 
+  <!-- Menu drawer -->
   <div class="h-full overflow-hidden">
     <DrawerLeft shown={state.guistate.pageStates.menu}>
       <div class="h-screen overflow-y-auto">