UX: improve weird scrolling behaviour, esp on homepage; preferred languages are on top in themes as well

public/css/index-tailwind-output.css

@@ -1530,6 +1530,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   margin-left: 1rem;
 }
 
+.ml-8 {
+  margin-left: 2rem;
+}
+
 .mr-0\.5 {
   margin-right: 0.125rem;
 }
@@ -8364,6 +8368,10 @@ svg.apply-fill path {
     height: 2.75rem;
   }
 
+  .sm\:h-20 {
+    height: 5rem;
+  }
+
   .sm\:h-24 {
     height: 6rem;
   }
@@ -8396,6 +8404,10 @@ svg.apply-fill path {
     width: 2.75rem;
   }
 
+  .sm\:w-20 {
+    width: 5rem;
+  }
+
   .sm\:w-24 {
     width: 6rem;
   }
@@ -8458,10 +8470,6 @@ svg.apply-fill path {
     padding: 0.5rem;
   }
 
-  .sm\:p-3 {
-    padding: 0.75rem;
-  }
-
   .sm\:p-4 {
     padding: 1rem;
   }
@@ -8478,6 +8486,11 @@ svg.apply-fill path {
     padding: 2rem;
   }
 
+  .sm\:px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
   .sm\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;

src/UI/AllThemesGui.svelte

@@ -152,43 +152,46 @@
 </script>
 
 <main>
-  <div class="absolute left-0 top-0 h-screen w-screen bg-white" style="z-index: -1;" />
-
-  <div class="h-full overflow-hidden">
   <DrawerLeft shown={guistate.pageStates.menu}>
-      <div class="h-screen overflow-y-auto">
     <MenuDrawerIndex onlyLink={true} state={menuDrawerState} />
-      </div>
   </DrawerLeft>
-  </div>
 
-  <div class="m-4 flex flex-col">
+
-    <div class="w-ful flex justify-between">
+  <div class="p-2 sm:p-4 flex flex-col w-screen">
+    <div class="w-full flex justify-between overflow-hidden">
       <button on:click={() => guistate.pageStates.menu.set(true)} class="m-0 rounded-full p-2">
         <MenuIcon class="h-6 w-6 cursor-pointer" />
       </button>
 
       <LanguagePicker
-        clss="self-end max-w-full"
+        clss="self-end ml-8 shrink max-w-full "
         assignTo={state.language}
         availableLanguages={t.title.SupportedLanguages()}
         preferredLanguages={userLanguages}
       />
     </div>
 
-    <div class="mt-4 flex">
+    <div class="mt-4 flex break-words overflow-hidden">
-      <div class="m-3 flex-none">
+      <div class="hidden md:block m-3 flex-none">
         <Logo alt="MapComplete Logo" class="h-12 w-12 sm:h-24 sm:w-24" />
       </div>
 
       <div class="link-underline flex w-full flex-col">
-        <h1 class="m-0 font-extrabold tracking-tight md:text-6xl">
+        <div class="flex flex-wrap">
+          <div class="md:hidden m-1 flex-none">
+            <Logo alt="MapComplete Logo" class="h-10 w-10 sm:h-20 sm:w-20 mr-4" />
+          </div>
+          <div class="flex flex-col">
+            <h1 class="m-0 font-extrabold tracking-tight md:text-6xl break-words">
               <Tr t={t.title} />
             </h1>
             <Tr
               cls="mr-4 text-base font-semibold sm:text-lg md:mt-5 md:text-xl lg:mx-0"
               t={Translations.t.index.intro}
             />
+          </div>
+        </div>
+
 
         <AccordionSingle>
           <Tr slot="header" t={Translations.t.index.about} />
@@ -217,6 +220,7 @@
       isFocused={searchIsFocussed}
     />
 
+
     <ThemesList {search} {state} themes={$officialSearched} />
 
     <LoginToggle {state}>
@@ -260,11 +264,11 @@
         </ThemesList>
       {/if}
     </LoginToggle>
+  </div>
 
     <div class="subtle mb-16 self-end">
       v{Constants.vNumber}
     </div>
-  </div>
 
   <div class="absolute top-0 h-0 w-0" style="margin-left: -10em">
     <MenuDrawer onlyLink={false} state={menuDrawerState} />

src/UI/Base/DrawerLeft.svelte

@@ -23,7 +23,7 @@
   transitionType="fly"
   {transitionParams}
   bgColor="frozen-glass"
-  divClass="overflow-y-auto z-50 "
+  divClass="overflow-hidden z-50 "
   bind:hidden
 >
   <slot>CONTENTS</slot>

src/UI/Base/SidebarUnit.svelte

@@ -6,7 +6,6 @@
     :global(.sidebar-unit) {
         display: flex;
         flex-direction: column;
-    row-gap: 0.25rem;
         background: var(--background-color);
         padding: 0.5rem;
         border-radius: 0.5rem;
@@ -16,6 +15,11 @@
         margin-top: 0;
         margin-bottom: 0.5rem;
         padding: 0.25rem;
+        top: 0;
+        position: sticky;
+        z-index: 1;
+        padding-top: 0.5rem;
+        background: var(--background-color);
     }
 
     :global(

src/UI/BigComponents/MenuDrawer.svelte

@@ -60,6 +60,8 @@
   })
 </script>
 
+<div class:h-0={!onlyLink} class:h-full={onlyLink} class="overflow-hidden">
+
 <MenuDrawerIndex {state} {onlyLink}>
   <!-- Theme related: documentation links, download, ... -->
   <svelte:fragment slot="theme-tools">
@@ -169,3 +171,4 @@
     {/if}
   </svelte:fragment>
 </MenuDrawerIndex>
+</div>

src/UI/BigComponents/MenuDrawerIndex.svelte

@@ -100,10 +100,10 @@
 </script>
 
 <div
-  class="low-interaction flex h-screen flex-col gap-y-2 overflow-y-auto p-2 sm:gap-y-3 sm:p-3"
+  class="low-interaction h-full flex flex-col overflow-hidden"
   class:hidden={!$shown}
 >
-  <div class="flex justify-between">
+  <div class="flex justify-between p-2 border-b border-black">
     <h2>
       <Tr t={t.title} />
     </h2>
@@ -113,6 +113,8 @@
       }}
     />
   </div>
+
+  <div class="overflow-y-auto flex flex-col gap-y-2  sm:gap-y-3 px-2 sm:px-3">
     {#if $showHome}
       <a class="button primary flex" href={Utils.HomepageLink()}>
         <Squares2x2 class="h-10 w-10" />
@@ -202,7 +204,7 @@
           <LogoutButton osmConnection={state.osmConnection} />
         </div>
       </LoginToggle>
-    <LanguagePicker />
+      <LanguagePicker preferredLanguages={state.userRelatedState.osmConnection.userDetails.mapD(ud => ud.languages)}/>
     </SidebarUnit>
 
     <slot name="theme-tools" />
@@ -214,7 +216,8 @@
         <Tr t={Translations.t.general.menu.aboutMapComplete} />
       </h3>
 
-    <a class="flex" href={$isAndroid ? "https://mapcomplete.org/studio" : window.location.protocol + "//" + window.location.host + "/studio.html"}>
+      <a class="flex"
+         href={$isAndroid ? "https://mapcomplete.org/studio" : window.location.protocol + "//" + window.location.host + "/studio.html"}>
         <Pencil class="mr-2 h-6 w-6" />
         <Tr t={Translations.t.general.morescreen.createYourOwnTheme} />
       </a>
@@ -313,3 +316,5 @@
       {/if}
     </div>
   </div>
+
+</div>

src/UI/InputElement/LanguagePicker.svelte

@@ -60,6 +60,9 @@
             {#if language !== $current}
               ({language_translations[language]?.[$current] ?? language})
             {/if}
+            {#if $preferredLanguages.indexOf(language)>=0}
+              ⭐
+              {/if}
           </option>
         {/each}
         <option disabled />