UI: fix #1720

public/css/index-tailwind-output.css

@@ -2704,6 +2704,10 @@ a.link-underline {
   min-height: 8rem;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .hover\:bg-indigo-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(199 210 254 / var(--tw-bg-opacity));

src/UI/AllThemesGui.svelte

@@ -29,10 +29,8 @@
 </script>
 
 <div class="flex flex-col m-4">
-  <div class="self-end">
-    <LanguagePicker assignTo={state.language} availableLanguages={t.title.SupportedLanguages()}
+  <LanguagePicker clss="self-end" assignTo={state.language} availableLanguages={t.title.SupportedLanguages()}
                     preferredLanguages={userLanguages} />
-  </div>
 
   <div class="flex mt-4">
 

src/UI/Base/Dropdown.svelte

@@ -24,8 +24,9 @@
       selectAppropriateValue()
     }
   }
+  export let cls : string = undefined
 </script>
 
-<select bind:this={htmlElement} on:change={(e) => {value.setData(e.srcElement.value)}}>
+<select class={cls} bind:this={htmlElement} on:change={(e) => {value.setData(e.srcElement.value)}}>
   <slot />
 </select>

src/UI/InputElement/LanguagePicker.svelte

@@ -8,6 +8,7 @@
   import Locale from "../i18n/Locale";
   import { LanguageIcon } from "@babeard/svelte-heroicons/solid";
   import Dropdown from "../Base/Dropdown.svelte";
+  import { twMerge } from "tailwind-merge"
 
   /**
    * Languages one can choose from
@@ -33,13 +34,14 @@
 
   let current = Locale.language;
 
+  export let clss : string = undefined
 </script>
 
 {#if availableLanguages?.length > 1}
-  <form class="flex items-center">
+  <form class={twMerge("flex items-center max-w-full pr-4", clss)}>
 
-    <LanguageIcon class="h-4 w-4 mr-1" />
-    <Dropdown value={assignTo}>
+    <LanguageIcon class="h-4 w-4 mr-1 shrink-0" />
+    <Dropdown cls="max-w-full" value={assignTo}>
       {#if preferredFiltered}
         {#each preferredFiltered as language}
           <option value={language} class="font-bold">

src/index.css

@@ -637,3 +637,7 @@ a.link-underline {
 .min-h-32 {
     min-height: 8rem;
 }
+
+.max-w-full {
+    max-width: 100%;
+}