Various style tweaks

src/UI/BigComponents/FilterPanel.svelte

@@ -9,6 +9,7 @@
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
   import Filter from "../../assets/svg/Filter.svelte"
+  import TitledPanel from "../Base/TitledPanel.svelte"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -46,12 +47,12 @@
   }
 </script>
 
-<div class="flex h-full flex-col">
-  <h2 class="low-interaction m-0 flex items-center p-4 drop-shadow-md">
+<TitledPanel>
+  <div class="flex" slot="title">
     <Filter class="h-6 w-6 pr-2" />
     <Tr t={Translations.t.general.menu.filter} />
-  </h2>
-  <div class="flex h-full flex-col overflow-auto border-b-2 p-4">
+  </div>
+
     {#each layout.layers as layer}
       <Filterview
         zoomlevel={state.mapProperties.zoom}
@@ -76,5 +77,7 @@
         zoomlevel={state.mapProperties.zoom}
       />
     {/each}
-  </div>
-</div>
+
+</TitledPanel>
+
+

src/UI/BigComponents/SelectedElementTitle.svelte

@@ -72,14 +72,14 @@
     {/if}
   </div>
   <slot name="close-button">
-    <button
-      class="mt-2 h-fit shrink-0 rounded-full border-none p-0"
+    <div
+      class="mt-2 h-fit shrink-0 rounded-full border-none p-0 cursor-pointer"
       on:click={() => state.selectedElement.setData(undefined)}
       style="border: 0 !important; padding: 0 !important;"
       use:ariaLabel={Translations.t.general.backToMap}
     >
       <XCircleIcon aria-hidden={true} class="h-8 w-8" />
-    </button>
+    </div>
   </slot>
 </div>
 

src/UI/BigComponents/SelectedElementView.svelte

@@ -22,6 +22,8 @@
     selectedElement.properties.id
   )
 
+  let isAddNew = tags.mapD(t => t.id.startsWith(LastClickFeatureSource.newPointElementId))
+
   function getLayer(properties: Record<string, string>) {
     if (properties.id === "settings") {
       return UserRelatedState.usersettingsConfig
@@ -76,7 +78,10 @@
   </div>
 {:else}
   <div
-    class="selected-element-view flex h-full w-full flex-col gap-y-1 overflow-y-auto p-1 px-4"
+    class="selected-element-view flex h-full w-full flex-col gap-y-1 overflow-y-auto"
+    class:p1={!$isAddNew}
+    class:px-4={!$isAddNew}
+
     tabindex="-1"
   >
     {#each $knownTagRenderings as config (config.id)}