UX: filterview: move 'enable all' and 'disable all' into header by request of user

public/css/index-tailwind-output.css

@@ -993,6 +993,10 @@ video {
   margin-right: 4rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1025,10 +1029,6 @@ video {
   margin-right: 0.25rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1041,6 +1041,10 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mr-10 {
+  margin-right: 2.5rem;
+}
+
 .mb-1\.5 {
   margin-bottom: 0.375rem;
 }
@@ -1217,14 +1221,14 @@ video {
   height: 6rem;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-screen {
   height: 100vh;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-fit {
   height: -webkit-fit-content;
   height: -moz-fit-content;
@@ -2019,6 +2023,10 @@ video {
   row-gap: 0.5rem;
 }
 
+.gap-x-2 {
+  column-gap: 0.5rem;
+}
+
 .gap-x-1 {
   column-gap: 0.25rem;
 }
@@ -2031,10 +2039,6 @@ video {
   column-gap: 0px;
 }
 
-.gap-x-2 {
-  column-gap: 0.5rem;
-}
-
 .gap-y-8 {
   row-gap: 2rem;
 }
@@ -3461,18 +3465,14 @@ video {
   padding-right: 1rem;
 }
 
-.pl-5 {
+.pl-3 {
-  padding-left: 1.25rem;
+  padding-left: 0.75rem;
 }
 
 .pr-3 {
   padding-right: 0.75rem;
 }
 
-.pl-3 {
-  padding-left: 0.75rem;
-}
-
 .pl-1 {
   padding-left: 0.25rem;
 }

src/UI/BigComponents/FilterPanel.svelte

@@ -48,11 +48,24 @@
 </script>
 
 <TitledPanel>
-  <div class="flex" slot="title">
+  <div class="flex items-center justify-between w-full mr-10" slot="title">
+    <div class="flex">
       <Filter class="h-6 w-6 pr-2" />
       <Tr t={Translations.t.general.menu.filter} />
     </div>
 
+
+    <div class="flex self-end text-sm gap-x-2">
+      <button class="small as-link" class:disabled={allEnabled} on:click={() => enableAll(true)}>
+        <Tr t={Translations.t.general.filterPanel.enableAll} />
+      </button>
+      <button class="small as-link" class:disabled={allDisabled} on:click={() => enableAll(false)}>
+        <Tr t={Translations.t.general.filterPanel.disableAll} />
+      </button>
+    </div>
+
+  </div>
+
     {#each layout.layers as layer}
       <Filterview
         zoomlevel={state.mapProperties.zoom}
@@ -60,14 +73,6 @@
         highlightedLayer={state.guistate.highlightedLayerInFilters}
       />
     {/each}
-    <div class="mt-1 flex self-end">
-      <button class="small" class:disabled={allEnabled} on:click={() => enableAll(true)}>
-        <Tr t={Translations.t.general.filterPanel.enableAll} />
-      </button>
-      <button class="small" class:disabled={allDisabled} on:click={() => enableAll(false)}>
-        <Tr t={Translations.t.general.filterPanel.disableAll} />
-      </button>
-    </div>
 
     {#each layout.tileLayerSources as tilesource}
       <OverlayToggle