Merge develop

src/UI/AllThemesGui.svelte

@@ -136,7 +136,7 @@
     <UnofficialThemeList search={themeSearchText} {state} />
 
     <div slot="not-logged-in">
-      <button class="w-full" on:click={() => osmConnection.AttemptLogin()}>
+      <button class="m-0 my-2 w-full" on:click={() => osmConnection.AttemptLogin()}>
         <Login class="mr-2 h-6 w-6 " />
         <Tr t={Translations.t.index.logIn} />
       </button>

src/UI/Base/ModalRight.svelte

@@ -16,6 +16,7 @@
   role="dialog"
   style="max-width: 100vw; max-height: 100vh"
   tabindex="-1"
+  id="modal-right"
   use:trapFocus
 >
   <slot name="close-button">
@@ -30,3 +31,12 @@
     <slot />
   </div>
 </div>
+
+<!-- Experimental support for foldable devices -->
+<style lang="scss">
+  @media (horizontal-viewport-segments: 2) {
+    #modal-right {
+      width: 50%;
+    }
+  }
+</style>

src/UI/BigComponents/FilterviewWithFields.svelte

@@ -50,13 +50,13 @@
 
 <div>
   {#each parts as part, i}
-    {#if part.subs}
+    {#if part["subs"]}
       <!-- This is a field! -->
       <span class="mx-1">
-        <ValidatedInput value={fieldValues[part.subs]} type={fieldTypes[part.subs]} />
+        <ValidatedInput value={fieldValues[part["subs"]]} type={fieldTypes[part["subs"]]} />
       </span>
     {:else}
-      {part.message}
+      {@html part["message"]}
     {/if}
   {/each}
 </div>

src/UI/BigComponents/ThemeButton.svelte

@@ -85,7 +85,7 @@
 </script>
 
 {#if theme.id !== personal.id || $unlockedPersonal}
-  <a class={"button w-full text-ellipsis"} href={$href}>
+  <a class={"button theme-button w-full text-ellipsis"} href={$href}>
     <img src={theme.icon} class="m-1 mr-2 block h-11 w-11 sm:m-2 sm:mr-4" alt="" />
     <span class="flex flex-col overflow-hidden text-ellipsis">
       <Tr t={title} />

src/UI/BigComponents/ThemesList.svelte

@@ -24,7 +24,7 @@
 
 <section class="w-full">
   <slot name="title" />
-  <div class="gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
+  <div class="theme-list my-2 gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
     {#each filteredThemes as theme (theme.id)}
       {#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)}
         <!-- TODO: doesn't work if first theme is hidden -->

src/UI/Popup/TagRendering/TagRenderingEditable.svelte

@@ -3,6 +3,7 @@
   import { Store, UIEventSource } from "../../../Logic/UIEventSource"
   import type { Feature } from "geojson"
   import type { SpecialVisualizationState } from "../../SpecialVisualization"
+  import TagRenderingAnswer from "./TagRenderingAnswer.svelte"
   import TagRenderingQuestion from "./TagRenderingQuestion.svelte"
   import { onDestroy } from "svelte"
   import Tr from "../../Base/Tr.svelte"
@@ -11,7 +12,6 @@
   import { Utils } from "../../../Utils"
   import { twMerge } from "tailwind-merge"
   import EditButton from "./EditButton.svelte"
-  import TagRenderingAnswer from "./TagRenderingAnswer.svelte"
 
   export let config: TagRenderingConfig
   export let tags: UIEventSource<Record<string, string>>

src/UI/Studio/EditLayerState.ts

@@ -103,7 +103,7 @@ export abstract class EditJsonState<T> {
         // Walk the path down to see if we find something
         let entry = this.configuration.data
         for (let i = 0; i < path.length; i++) {
-            if (entry === undefined) {
+            if (entry === undefined || entry === null) {
                 // We reached a dead end - no old vlaue
                 return undefined
             }