UX: tone down popover elements

public/css/index-tailwind-output.css

@@ -2822,10 +2822,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   white-space: nowrap;
 }
 
-.overflow-ellipsis {
-  text-overflow: ellipsis;
-}
-
 .text-ellipsis {
   text-overflow: ellipsis;
 }
@@ -8344,6 +8340,10 @@ svg.apply-fill path {
     margin-top: 0.5rem;
   }
 
+  .sm\:block {
+    display: block;
+  }
+
   .sm\:inline {
     display: inline;
   }
@@ -8420,6 +8420,10 @@ svg.apply-fill path {
     width: auto;
   }
 
+  .sm\:grow-0 {
+    flex-grow: 0;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -8432,6 +8436,10 @@ svg.apply-fill path {
     flex-wrap: nowrap;
   }
 
+  .sm\:justify-start {
+    justify-content: flex-start;
+  }
+
   .sm\:gap-y-3 {
     row-gap: 0.75rem;
   }

src/UI/BigComponents/GpsElementHelper.svelte

@@ -7,14 +7,16 @@
   import Tr from "../Base/Tr.svelte"
   import { onDestroy } from "svelte"
   import { Popover } from "flowbite-svelte"
+  import { Store } from "../../Logic/UIEventSource"
 
   export let state: ThemeViewState
   let gpsState = state.geolocationState
   export let mapIsDragged: Store<void>
   let open = true
 
-  function showFor(timeoutSeconds: number = 5) {
+  function showFor(timeoutSeconds: number = 3) {
     open = true
+    console.trace("Showing gpshelperelement")
     window.setTimeout(() => {
       open = false
     }, timeoutSeconds * 1000)
@@ -30,13 +32,13 @@
     if (gpsState.gpsAvailable.data && gpsState.allowMoving.data) {
       return
     }
-    showFor(5)
+    showFor(3)
   })
-  let explanation = gpsState.gpsStateExplanation
+  let explanation = gpsState.gpsStateExplanation.stabilized(50)
   onDestroy(
-    explanation.stabilized(50).addCallbackD((expl) => {
+    explanation.addCallback((expl) => {
       if (expl) {
-        showFor(5)
+        showFor(3)
       } else {
         open = false
       }
@@ -46,7 +48,6 @@
 
 <Popover
   reference={undefined}
-  trigger="null"
   placement="left"
   transition={(e) => fade(e, { duration: 150 })}
   bind:open

src/UI/BigComponents/WelcomeBack.svelte

@@ -6,26 +6,26 @@
   let open = false
   export let state: { osmConnection: OsmConnection }
   let userdetails = state.osmConnection.userDetails
-
-  userdetails.addCallbackAndRunD((ud) => {
+  let username = userdetails.mapD(ud => ud.name)
+  username.addCallbackAndRunD((ud) => {
     if (ud) {
       open = true
       window.setTimeout(() => {
-        open = false
-      }, 5000)
+         open = false
+      }, 3000)
     }
   })
 </script>
 
 <Popover
-  class="z-50 mt-4"
+  class="mt-4 hidden sm:block"
   defaultClass="py-2 px-3 w-fit "
   trigger="null"
   placement="bottom"
   transition={(e) => fade(e, { duration: 150 })}
   bind:open
 >
-  {#if $userdetails !== undefined}
+  {#if $username !== undefined}
     <div style="width: max-content" class="flex items-center">
       {#if $userdetails.img}
         <img src={$userdetails.img} alt="avatar" class="mr-4 h-8 w-8 rounded-full" />
@@ -33,7 +33,7 @@
       <div>
         <div>Welcome back</div>
         <div class="normal-background" style="width: max-content">
-          <b>{$userdetails?.name}</b>
+          <b>{$username}</b>
         </div>
       </div>
     </div>

src/UI/ThemeViewGUI.svelte

@@ -323,7 +323,7 @@
               </div>
             {/if}
           </div>
-          <GpsElementHelper reference="#gps-control-button" {state} {mapIsDragged} />
+          <GpsElementHelper {state} {mapIsDragged} />
         </If>
         <If condition={state.mapProperties.showScale}>
           <div class="h-6">
@@ -372,12 +372,6 @@
         </MapControlButton>
       </div>
 
-      {#if $debug && $hash}
-        <div class="alert">
-          {$hash}
-        </div>
-      {/if}
-
       <If condition={state.featureSwitches.featureSwitchSearch}>
         <div class="flex flex-grow items-center justify-end">
           <div class="w-full sm:w-64">