diff --git a/Logic/ExtraFunctions.ts b/Logic/ExtraFunctions.ts
index 833ce0d9d..1c1c5ff78 100644
--- a/Logic/ExtraFunctions.ts
+++ b/Logic/ExtraFunctions.ts
@@ -445,7 +445,7 @@ class GetParsed implements ExtraFunction {
     }
 }
 
-export type ExtraFuncType = typeof ExtraFunctions.types[number]
+export type ExtraFuncType = (typeof ExtraFunctions.types)[number]
 
 export class ExtraFunctions {
     static readonly intro = new Combine([
diff --git a/Models/Constants.ts b/Models/Constants.ts
index 9764afe48..610dde3bb 100644
--- a/Models/Constants.ts
+++ b/Models/Constants.ts
@@ -1,7 +1,7 @@
 import { Utils } from "../Utils"
 import * as meta from "../package.json"
 
-export type PriviligedLayerType = typeof Constants.priviliged_layers[number]
+export type PriviligedLayerType = (typeof Constants.priviliged_layers)[number]
 
 export default class Constants {
     public static vNumber = meta.version
diff --git a/Models/MenuState.ts b/Models/MenuState.ts
index c946402af..3b6aa600a 100644
--- a/Models/MenuState.ts
+++ b/Models/MenuState.ts
@@ -4,8 +4,8 @@ import UserRelatedState from "../Logic/State/UserRelatedState"
 import { Utils } from "../Utils"
 import { LocalStorageSource } from "../Logic/Web/LocalStorageSource"
 
-export type ThemeViewTabStates = typeof MenuState._themeviewTabs[number]
-export type MenuViewTabStates = typeof MenuState._menuviewTabs[number]
+export type ThemeViewTabStates = (typeof MenuState._themeviewTabs)[number]
+export type MenuViewTabStates = (typeof MenuState._menuviewTabs)[number]
 
 /**
  * Indicates if a menu is open, and if so, which tab is selected;
diff --git a/Models/ThemeConfig/LayerConfig.ts b/Models/ThemeConfig/LayerConfig.ts
index 8fc628274..763793784 100644
--- a/Models/ThemeConfig/LayerConfig.ts
+++ b/Models/ThemeConfig/LayerConfig.ts
@@ -66,7 +66,7 @@ export default class LayerConfig extends WithContextLoader {
     public readonly filters: FilterConfig[]
     public readonly filterIsSameAs: string
     public readonly forceLoad: boolean
-    public readonly syncSelection: typeof LayerConfig.syncSelectionAllowed[number] // this is a trick to conver a constant array of strings into a type union of these values
+    public readonly syncSelection: (typeof LayerConfig.syncSelectionAllowed)[number] // this is a trick to conver a constant array of strings into a type union of these values
 
     public readonly _needsFullNodeDatabase: boolean
     public readonly popupInFloatover
diff --git a/Models/ThemeViewState.ts b/Models/ThemeViewState.ts
index 5d11d98dc..f4d0d7e16 100644
--- a/Models/ThemeViewState.ts
+++ b/Models/ThemeViewState.ts
@@ -458,7 +458,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
      * Add the special layers to the map
      */
     private drawSpecialLayers() {
-        type AddedByDefaultTypes = typeof Constants.added_by_default[number]
+        type AddedByDefaultTypes = (typeof Constants.added_by_default)[number]
         const empty = []
         /**
          * A listing which maps the layerId onto the featureSource
diff --git a/UI/Base/BackButton.svelte b/UI/Base/BackButton.svelte
index 4b005e5d0..2b11394e1 100644
--- a/UI/Base/BackButton.svelte
+++ b/UI/Base/BackButton.svelte
@@ -15,6 +15,6 @@
   on:click={() => dispatch("click")}
   options={{ extraClasses: clss + " flex items-center" }}
 >
-  <ChevronLeftIcon class="w-12 h-12" slot="image" />
+  <ChevronLeftIcon class="h-12 w-12" slot="image" />
   <slot slot="message" />
 </SubtleButton>
diff --git a/UI/Base/DragInvitation.svelte b/UI/Base/DragInvitation.svelte
index fda880f07..623c77d48 100644
--- a/UI/Base/DragInvitation.svelte
+++ b/UI/Base/DragInvitation.svelte
@@ -27,7 +27,7 @@
   }
 </script>
 
-<div bind:this={mainElem} class="absolute bottom-0 right-0 w-full h-full">
+<div bind:this={mainElem} class="absolute bottom-0 right-0 h-full w-full">
   <div id="hand-container" class="pointer-events-none">
     <img src="./assets/svg/hand.svg" />
   </div>
diff --git a/UI/Base/FloatOver.svelte b/UI/Base/FloatOver.svelte
index 756f67cfc..701b19b39 100644
--- a/UI/Base/FloatOver.svelte
+++ b/UI/Base/FloatOver.svelte
@@ -9,17 +9,17 @@
 </script>
 
 <div
-  class="absolute top-0 right-0 w-screen h-screen p-4 md:p-6"
+  class="absolute top-0 right-0 h-screen w-screen p-4 md:p-6"
   style="background-color: #00000088"
 >
   <div class="content normal-background">
-    <div class="rounded-xl h-full">
+    <div class="h-full rounded-xl">
       <slot />
     </div>
     <slot name="close-button">
       <!-- The close button is placed _after_ the default slot in order to always paint it on top -->
       <div
-        class="w-8 h-8 absolute right-10 top-10 cursor-pointer"
+        class="absolute right-10 top-10 h-8 w-8 cursor-pointer"
         on:click={() => dispatch("close")}
       >
         <XCircleIcon />
diff --git a/UI/Base/Loading.svelte b/UI/Base/Loading.svelte
index d1a38dbde..097bc4472 100644
--- a/UI/Base/Loading.svelte
+++ b/UI/Base/Loading.svelte
@@ -3,8 +3,8 @@
   import Svg from "../../Svg"
 </script>
 
-<div class="pl-2 p-1 flex">
-  <div class="animate-spin self-center w-6 h-6 min-w-6">
+<div class="flex p-1 pl-2">
+  <div class="min-w-6 h-6 w-6 animate-spin self-center">
     <ToSvelte construct={Svg.loading_svg()} />
   </div>
   <div class="ml-2">
diff --git a/UI/Base/LoginToggle.svelte b/UI/Base/LoginToggle.svelte
index d5bdb4b4d..93df7e84b 100644
--- a/UI/Base/LoginToggle.svelte
+++ b/UI/Base/LoginToggle.svelte
@@ -33,8 +33,8 @@
       <Loading />
     </slot>
   {:else if $loadingStatus === "error"}
-    <div class="flex items-center alert max-w-64">
-      <img src="./assets/svg/invalid.svg" class="w-8 h-8 m-2 shrink-0" />
+    <div class="alert max-w-64 flex items-center">
+      <img src="./assets/svg/invalid.svg" class="m-2 h-8 w-8 shrink-0" />
       <Tr t={offlineModes[$apiState]} />
     </div>
   {:else if $loadingStatus === "logged-in"}
diff --git a/UI/Base/MapControlButton.svelte b/UI/Base/MapControlButton.svelte
index 7fa09aa20..55fa3bd07 100644
--- a/UI/Base/MapControlButton.svelte
+++ b/UI/Base/MapControlButton.svelte
@@ -10,7 +10,7 @@
 
 <button
   on:click={(e) => dispatch("click", e)}
-  class={"rounded-full h-fit w-fit m-0.5 md:m-1 p-0.5 sm:p-1 pointer-events-auto " + cls}
+  class={"pointer-events-auto m-0.5 h-fit w-fit rounded-full p-0.5 sm:p-1 md:m-1 " + cls}
 >
   <slot />
 </button>
diff --git a/UI/Base/ModalRight.svelte b/UI/Base/ModalRight.svelte
index 752ac3f8f..cbff2cc25 100644
--- a/UI/Base/ModalRight.svelte
+++ b/UI/Base/ModalRight.svelte
@@ -9,13 +9,13 @@
 </script>
 
 <div
-  class="absolute top-0 right-0 h-screen overflow-auto w-full md:w-6/12 lg:w-5/12 xl:w-4/12 drop-shadow-2xl"
+  class="absolute top-0 right-0 h-screen w-full overflow-auto drop-shadow-2xl md:w-6/12 lg:w-5/12 xl:w-4/12"
   style="max-width: 100vw; max-height: 100vh"
 >
-  <div class="flex flex-col m-0 normal-background">
+  <div class="normal-background m-0 flex flex-col">
     <slot name="close-button">
       <div
-        class="w-8 h-8 absolute right-10 top-10 cursor-pointer"
+        class="absolute right-10 top-10 h-8 w-8 cursor-pointer"
         on:click={() => dispatch("close")}
       >
         <XCircleIcon />
diff --git a/UI/Base/NextButton.svelte b/UI/Base/NextButton.svelte
index e22359e49..fc1a67f36 100644
--- a/UI/Base/NextButton.svelte
+++ b/UI/Base/NextButton.svelte
@@ -17,8 +17,8 @@
   options={{ extraClasses: clss + " flex items-center" }}
 >
   <slot name="image" slot="image" />
-  <div class="w-full flex justify-between items-center" slot="message">
+  <div class="flex w-full items-center justify-between" slot="message">
     <slot />
-    <ChevronRightIcon class="w-12 h-12" />
+    <ChevronRightIcon class="h-12 w-12" />
   </div>
 </SubtleButton>
diff --git a/UI/Base/ShareButton.svelte b/UI/Base/ShareButton.svelte
index 2fc187f34..731cdeb83 100644
--- a/UI/Base/ShareButton.svelte
+++ b/UI/Base/ShareButton.svelte
@@ -23,7 +23,7 @@
   }
 </script>
 
-<button on:click={share} class="secondary w-8 h-8 m-0 p-0">
+<button on:click={share} class="secondary m-0 h-8 w-8 p-0">
   <slot name="content">
     <ToSvelte construct={Svg.share_svg().SetClass("w-7 h-7 p-1")} />
   </slot>
diff --git a/UI/Base/TabbedGroup.svelte b/UI/Base/TabbedGroup.svelte
index 706795a70..9d44d5414 100644
--- a/UI/Base/TabbedGroup.svelte
+++ b/UI/Base/TabbedGroup.svelte
@@ -16,9 +16,9 @@
   }
 </script>
 
-<div class="tabbedgroup w-full h-full">
+<div class="tabbedgroup h-full w-full">
   <TabGroup
-    class="h-full w-full flex flex-col"
+    class="flex h-full w-full flex-col"
     defaultIndex={1}
     on:change={(e) => {
       if (e.detail >= 0) {
@@ -26,7 +26,7 @@
       }
     }}
   >
-    <div class="interactive flex items-center justify-between sticky top-0">
+    <div class="interactive sticky top-0 flex items-center justify-between">
       <TabList class="flex flex-wrap">
         {#if $$slots.title1}
           <Tab class={({ selected }) => "tab " + (selected ? "primary" : "")}>
@@ -66,7 +66,7 @@
       </TabList>
       <slot name="post-tablist" />
     </div>
-    <div class="overflow-y-auto normal-background">
+    <div class="normal-background overflow-y-auto">
       <TabPanels defaultIndex={$tab}>
         <TabPanel>
           <slot name="content0">
diff --git a/UI/Base/WeblateLink.svelte b/UI/Base/WeblateLink.svelte
index 868d1c407..f746f6d05 100644
--- a/UI/Base/WeblateLink.svelte
+++ b/UI/Base/WeblateLink.svelte
@@ -17,7 +17,7 @@
     <a
       href={LinkToWeblate.hrefToWeblate($language, context)}
       target="_blank"
-      class="mx-1 weblate-link"
+      class="weblate-link mx-1"
     >
       <img src="./assets/svg/translate.svg" class="font-gray" />
     </a>
diff --git a/UI/BigComponents/BackgroundSwitcher.svelte b/UI/BigComponents/BackgroundSwitcher.svelte
index 257901e6d..3ed280b2f 100644
--- a/UI/BigComponents/BackgroundSwitcher.svelte
+++ b/UI/BigComponents/BackgroundSwitcher.svelte
@@ -60,14 +60,14 @@
 
 <div class="flex items-end opacity-50 hover:opacity-100">
   <div class="flex flex-col md:flex-row">
-    <button class="w-16 h-12 md:w-16 md:h-16 overflow-hidden m-0 p-0" on:click={use(raster0)}>
+    <button class="m-0 h-12 w-16 overflow-hidden p-0 md:h-16 md:w-16" on:click={use(raster0)}>
       <OverlayMap
         placedOverMap={normalMap}
         placedOverMapProperties={mapproperties}
         rasterLayer={raster0}
       />
     </button>
-    <button class="w-16 h-12 md:w-16 md:h-16 overflow-hidden m-0 p-0 " on:click={use(raster1)}>
+    <button class="m-0 h-12 w-16 overflow-hidden p-0 md:h-16 md:w-16" on:click={use(raster1)}>
       <OverlayMap
         placedOverMap={normalMap}
         placedOverMapProperties={mapproperties}
@@ -75,8 +75,8 @@
       />
     </button>
   </div>
-  <div class="text-sm flex flex-col gap-y-1 h-fit ml-1">
-    <div class="low-interaction rounded p-1 w-64">
+  <div class="ml-1 flex h-fit flex-col gap-y-1 text-sm">
+    <div class="low-interaction w-64 rounded p-1">
       <RasterLayerPicker
         availableLayers={availableRasterLayers}
         value={mapproperties.rasterLayer}
diff --git a/UI/BigComponents/ContactLink.svelte b/UI/BigComponents/ContactLink.svelte
index c26ea8860..f3ccac9e2 100644
--- a/UI/BigComponents/ContactLink.svelte
+++ b/UI/BigComponents/ContactLink.svelte
@@ -29,9 +29,9 @@
     <h3>{country?.nameEn}</h3>
   {/if}
   {#each resources as resource}
-    <div class="flex link-underline items-center my-4">
+    <div class="link-underline my-4 flex items-center">
       <img
-        class="w-8 h-8 m-2"
+        class="m-2 h-8 w-8"
         src={`https://raw.githubusercontent.com/pietervdvn/MapComplete-data/main/community_index/${resource.type}.svg`}
       />
       <div class="flex flex-col">
diff --git a/UI/BigComponents/Filterview.svelte b/UI/BigComponents/Filterview.svelte
index 051c78fa3..e4f3e234d 100644
--- a/UI/BigComponents/Filterview.svelte
+++ b/UI/BigComponents/Filterview.svelte
@@ -55,7 +55,7 @@
 
 {#if filteredLayer.layerDef.name}
   <div bind:this={mainElem} class="mb-1.5">
-    <label class="flex gap-1 no-image-background">
+    <label class="no-image-background flex gap-1">
       <Checkbox selected={isDisplayed} />
       <If condition={filteredLayer.isDisplayed}>
         <ToSvelte
@@ -78,7 +78,7 @@
     </label>
 
     {#if $isDisplayed && filteredLayer.layerDef.filters?.length > 0}
-      <div id="subfilters" class="flex flex-col gap-y-1 ml-4">
+      <div id="subfilters" class="ml-4 flex flex-col gap-y-1">
         {#each filteredLayer.layerDef.filters as filter}
           <div>
             <!-- There are three (and a half) modes of filters: a single checkbox, a radio button/dropdown or with searchable fields -->
diff --git a/UI/BigComponents/Geosearch.svelte b/UI/BigComponents/Geosearch.svelte
index 67e2ba164..5964a9948 100644
--- a/UI/BigComponents/Geosearch.svelte
+++ b/UI/BigComponents/Geosearch.svelte
@@ -91,7 +91,7 @@
   }
 </script>
 
-<div class="flex normal-background rounded-full pl-2 justify-between">
+<div class="normal-background flex justify-between rounded-full pl-2">
   <form class="w-full">
     {#if isRunning}
       <Loading>{Translations.t.general.search.searching}</Loading>
@@ -110,7 +110,7 @@
       />
     {/if}
   </form>
-  <div class="w-6 h-6 self-end" on:click={performSearch}>
+  <div class="h-6 w-6 self-end" on:click={performSearch}>
     <ToSvelte construct={Svg.search_svg} />
   </div>
 </div>
diff --git a/UI/BigComponents/MapillaryLink.svelte b/UI/BigComponents/MapillaryLink.svelte
index 2daf269e1..ddaf3c0d1 100644
--- a/UI/BigComponents/MapillaryLink.svelte
+++ b/UI/BigComponents/MapillaryLink.svelte
@@ -20,7 +20,7 @@
   }&z=${Math.max(($zoom ?? 2) - 1, 1)}`
 </script>
 
-<a class="flex button items-center" href={mapillaryLink} target="_blank">
+<a class="button flex items-center" href={mapillaryLink} target="_blank">
   <ToSvelte construct={() => Svg.mapillary_black_svg().SetClass("w-12 h-12 m-2 mr-4 shrink-0")} />
   <div class="flex flex-col">
     <Tr t={Translations.t.general.attribution.openMapillary} />
diff --git a/UI/BigComponents/OpenBackgroundSelectorButton.svelte b/UI/BigComponents/OpenBackgroundSelectorButton.svelte
index e28e23b88..fc1351995 100644
--- a/UI/BigComponents/OpenBackgroundSelectorButton.svelte
+++ b/UI/BigComponents/OpenBackgroundSelectorButton.svelte
@@ -7,5 +7,5 @@
 </script>
 
 <MapControlButton on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}>
-  <Square3Stack3dIcon class="w-6 h-6" />
+  <Square3Stack3dIcon class="h-6 w-6" />
 </MapControlButton>
diff --git a/UI/BigComponents/OpenIdEditor.svelte b/UI/BigComponents/OpenIdEditor.svelte
index 8ab6f99ca..275ec8b49 100644
--- a/UI/BigComponents/OpenIdEditor.svelte
+++ b/UI/BigComponents/OpenIdEditor.svelte
@@ -26,7 +26,7 @@
   }/${$location?.lon ?? 0}`
 </script>
 
-<a class="flex button items-center" target="_blank" href={idLink}>
-  <PencilIcon class="w-12 h-12 p-2 pr-4" />
+<a class="button flex items-center" target="_blank" href={idLink}>
+  <PencilIcon class="h-12 w-12 p-2 pr-4" />
   <Tr t={Translations.t.general.attribution.editId} />
 </a>
diff --git a/UI/BigComponents/SelectedElementTitle.svelte b/UI/BigComponents/SelectedElementTitle.svelte
index 0d6302727..01c0bbaf9 100644
--- a/UI/BigComponents/SelectedElementTitle.svelte
+++ b/UI/BigComponents/SelectedElementTitle.svelte
@@ -33,7 +33,7 @@
   <Tr t={Translations.t.delete.isDeleted} />
 {:else}
   <div
-    class="flex border-b-2 border-black drop-shadow-md justify-between items-center low-interaction px-3"
+    class="low-interaction flex items-center justify-between border-b-2 border-black px-3 drop-shadow-md"
   >
     <div class="flex flex-col">
       <!-- Title element-->
@@ -42,11 +42,11 @@
       </h3>
 
       <div
-        class="no-weblate title-icons flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2 gap-x-0.5 p-1 links-as-button"
+        class="no-weblate title-icons links-as-button mr-2 flex flex-row flex-wrap items-center gap-x-0.5 p-1 pt-0.5 sm:pt-1"
       >
         {#each layer.titleIcons as titleIconConfig}
           {#if (titleIconConfig.condition?.matchesProperties(_tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties( { ..._metatags, ..._tags } ) ?? true) && titleIconConfig.IsKnown(_tags)}
-            <div class="w-8 h-8 flex items-center">
+            <div class="flex h-8 w-8 items-center">
               <TagRenderingAnswer
                 config={titleIconConfig}
                 {tags}
@@ -61,7 +61,7 @@
       </div>
     </div>
     <XCircleIcon
-      class="w-8 h-8 cursor-pointer"
+      class="h-8 w-8 cursor-pointer"
       on:click={() => state.selectedElement.setData(undefined)}
     />
   </div>
diff --git a/UI/BigComponents/SelectedElementView.svelte b/UI/BigComponents/SelectedElementView.svelte
index 074285631..62408bfca 100644
--- a/UI/BigComponents/SelectedElementView.svelte
+++ b/UI/BigComponents/SelectedElementView.svelte
@@ -35,7 +35,7 @@
     <Tr t={Translations.t.general.returnToTheMap} />
   </button>
 {:else}
-  <div class="flex flex-col overflow-y-auto p-1 px-2 gap-y-2">
+  <div class="flex flex-col gap-y-2 overflow-y-auto p-1 px-2">
     {#each layer.tagRenderings as config (config.id)}
       {#if (config.condition === undefined || config.condition.matchesProperties(_tags)) && (config.metacondition === undefined || config.metacondition.matchesProperties( { ..._tags, ..._metatags } ))}
         {#if config.IsKnown(_tags)}
diff --git a/UI/BigComponents/ThemeButton.svelte b/UI/BigComponents/ThemeButton.svelte
index ace9b6d00..ac91ee78a 100644
--- a/UI/BigComponents/ThemeButton.svelte
+++ b/UI/BigComponents/ThemeButton.svelte
@@ -72,8 +72,8 @@
 
 {#if theme.id !== personal.id || $userDetails.csCount > Constants.userJourney.personalLayoutUnlock}
   <SubtleLink href={$href} options={{ extraClasses: "w-full" }}>
-    <img slot="image" src={theme.icon} class="block h-11 w-11 mx-4" alt="" />
-    <span class="flex flex-col text-ellipsis overflow-hidden">
+    <img slot="image" src={theme.icon} class="mx-4 block h-11 w-11" alt="" />
+    <span class="flex flex-col overflow-hidden text-ellipsis">
       <Tr t={title} />
       <span class="subtle max-h-12 truncate text-ellipsis">
         <Tr t={description} />
diff --git a/UI/BigComponents/ThemeIntroPanel.svelte b/UI/BigComponents/ThemeIntroPanel.svelte
index 1b9ecac31..a9420e5ce 100644
--- a/UI/BigComponents/ThemeIntroPanel.svelte
+++ b/UI/BigComponents/ThemeIntroPanel.svelte
@@ -50,20 +50,20 @@ loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-40
 -->
 <Tr t={layout.descriptionTail} />
 <NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
-  <div class="flex justify-center w-full text-2xl">
+  <div class="flex w-full justify-center text-2xl">
     <Tr t={Translations.t.general.openTheMap} />
   </div>
 </NextButton>
 
 <div class="flex w-full flex-wrap sm:flex-nowrap">
   <IfNot condition={state.geolocation.geolocationState.permission.map((p) => p === "denied")}>
-    <button class="flex w-full gap-x-2 items-center" on:click={jumpToCurrentLocation}>
+    <button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
       <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")} />
       <Tr t={Translations.t.general.openTheMapAtGeolocation} />
     </button>
   </IfNot>
 
-  <div class="flex gap-x-2 items-center w-full border rounded .button p-2 m-1 low-interaction">
+  <div class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2">
     <div class="w-full">
       <Geosearch
         bounds={state.mapProperties.bounds}
@@ -78,11 +78,11 @@ loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-40
       />
     </div>
     <button
-      class={"flex gap-x-2 justify-between items-center " + (searchEnabled ? "" : "disabled")}
+      class={"flex items-center justify-between gap-x-2 " + (searchEnabled ? "" : "disabled")}
       on:click={() => triggerSearch.ping()}
     >
       <Tr t={Translations.t.general.search.searchShort} />
-      <SearchIcon class="w-6 h-6" />
+      <SearchIcon class="h-6 w-6" />
     </button>
   </div>
 </div>
diff --git a/UI/BigComponents/ThemesList.svelte b/UI/BigComponents/ThemesList.svelte
index 99533fc34..5bb616a26 100644
--- a/UI/BigComponents/ThemesList.svelte
+++ b/UI/BigComponents/ThemesList.svelte
@@ -21,7 +21,7 @@
 <section class="w-full">
   <slot name="title" />
   {#if onMainScreen}
-    <div class="md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <div class="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)}
           <ThemeButton {theme} {isCustom} userDetails={state.osmConnection.userDetails} {state} />
diff --git a/UI/BigComponents/UserProfile.svelte b/UI/BigComponents/UserProfile.svelte
index 628a96855..5ade85a15 100644
--- a/UI/BigComponents/UserProfile.svelte
+++ b/UI/BigComponents/UserProfile.svelte
@@ -24,11 +24,11 @@
   )
 </script>
 
-<div class="flex border border-gray-600 border-dashed m-1 p-1 rounded-md link-underline">
+<div class="link-underline m-1 flex rounded-md border border-dashed border-gray-600 p-1">
   {#if $userdetails.img}
-    <img src={$userdetails.img} class="rounded-full w-12 h-12 m-4" />
+    <img src={$userdetails.img} class="m-4 h-12 w-12 rounded-full" />
   {:else}
-    <UserCircleIcon class="w-12 h-12" />
+    <UserCircleIcon class="h-12 w-12" />
   {/if}
   <div class="flex flex-col">
     <h3>{$userdetails.name}</h3>
@@ -39,13 +39,13 @@
         target="_blank"
         class="link-no-underline flex items-center self-end"
       >
-        <PencilAltIcon slot="image" class="p-2 w-8 h-8" />
+        <PencilAltIcon slot="image" class="h-8 w-8 p-2" />
         <Tr slot="message" t={Translations.t.userinfo.editDescription} />
       </a>
     {:else}
       <Tr t={Translations.t.userinfo.noDescription} />
       <a href={osmConnection.Backend() + "/profile/edit"} target="_blank" class="flex items-center">
-        <PencilAltIcon slot="image" class="p-2 w-8 h-8" />
+        <PencilAltIcon slot="image" class="h-8 w-8 p-2" />
         <Tr slot="message" t={Translations.t.userinfo.noDescriptionCallToAction} />
       </a>
     {/if}
diff --git a/UI/BigComponents/WaySplitMap.svelte b/UI/BigComponents/WaySplitMap.svelte
index ee5c620b7..fbe5fd2fe 100644
--- a/UI/BigComponents/WaySplitMap.svelte
+++ b/UI/BigComponents/WaySplitMap.svelte
@@ -101,6 +101,6 @@
   })
 </script>
 
-<div class="w-full h-full">
+<div class="h-full w-full">
   <MaplibreMap {map} />
 </div>
diff --git a/UI/DownloadFlow/DownloadButton.svelte b/UI/DownloadFlow/DownloadButton.svelte
index c0611775a..2b6fb9254 100644
--- a/UI/DownloadFlow/DownloadButton.svelte
+++ b/UI/DownloadFlow/DownloadButton.svelte
@@ -85,7 +85,7 @@
 {:else}
   <button class="flex w-full" on:click={clicked}>
     <slot name="image">
-      <ArrowDownTrayIcon class="w-12 h-12 mr-2 shrink-0" />
+      <ArrowDownTrayIcon class="mr-2 h-12 w-12 shrink-0" />
     </slot>
     <span class="flex flex-col items-start">
       <Tr t={mainText} />
diff --git a/UI/DownloadFlow/DownloadPanel.svelte b/UI/DownloadFlow/DownloadPanel.svelte
index 797e0ef13..c9b912958 100644
--- a/UI/DownloadFlow/DownloadPanel.svelte
+++ b/UI/DownloadFlow/DownloadPanel.svelte
@@ -34,7 +34,7 @@
 {#if $isLoading}
   <Loading />
 {:else}
-  <div class="w-full flex flex-col" />
+  <div class="flex w-full flex-col" />
   <h3>
     <Tr t={t.title} />
   </h3>
diff --git a/UI/InputElement/Helpers/DirectionInput.svelte b/UI/InputElement/Helpers/DirectionInput.svelte
index 1e012ee95..a2ed318c2 100644
--- a/UI/InputElement/Helpers/DirectionInput.svelte
+++ b/UI/InputElement/Helpers/DirectionInput.svelte
@@ -41,7 +41,7 @@
 
 <div
   bind:this={mainElem}
-  class="relative w-48 h-48 cursor-pointer overflow-hidden"
+  class="relative h-48 w-48 cursor-pointer overflow-hidden"
   on:click={(e) => onPosChange(e.x, e.y)}
   on:mousedown={(e) => {
     isDown = true
@@ -58,11 +58,11 @@
   on:touchmove={(e) => onPosChange(e.touches[0].clientX, e.touches[0].clientY)}
   on:touchstart={(e) => onPosChange(e.touches[0].clientX, e.touches[0].clientY)}
 >
-  <div class="w-full h-full absolute top-0 left-0 cursor-pointer">
+  <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
     <MaplibreMap {map} attribution={false} />
   </div>
 
-  <div bind:this={directionElem} class="absolute w-full h-full top-0 left-0">
+  <div bind:this={directionElem} class="absolute top-0 left-0 h-full w-full">
     <ToSvelte construct={Svg.direction_stroke_svg} />
   </div>
 </div>
diff --git a/UI/InputElement/Helpers/FloorSelector.svelte b/UI/InputElement/Helpers/FloorSelector.svelte
index 399baaa70..1b35c3dfd 100644
--- a/UI/InputElement/Helpers/FloorSelector.svelte
+++ b/UI/InputElement/Helpers/FloorSelector.svelte
@@ -102,11 +102,11 @@
   class="relative"
   style={`height: calc(${HEIGHT}px * ${$floors.length}); width: 96px`}
 >
-  <div class="h-full absolute w-min right-0">
+  <div class="absolute right-0 h-full w-min">
     {#each $floors as floor, i}
       <button
         style={`height: ${HEIGHT}px; width: ${HEIGHT}px`}
-        class={"m-0 border-2 border-gray-300 flex content-box justify-center items-center " +
+        class={"content-box m-0 flex items-center justify-center border-2 border-gray-300 " +
           (i === (forceIndex ?? $index) ? "selected" : "")}
         on:click={() => {
           forceIndex = i
diff --git a/UI/InputElement/Helpers/LocationInput.svelte b/UI/InputElement/Helpers/LocationInput.svelte
index ba061f09d..dfd910f3a 100644
--- a/UI/InputElement/Helpers/LocationInput.svelte
+++ b/UI/InputElement/Helpers/LocationInput.svelte
@@ -76,13 +76,13 @@
   }
 </script>
 
-<div class="relative h-full min-h-32 cursor-pointer overflow-hidden">
-  <div class="w-full h-full absolute top-0 left-0 cursor-pointer">
+<div class="min-h-32 relative h-full cursor-pointer overflow-hidden">
+  <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
     <MaplibreMap {map} />
   </div>
 
   <div
-    class="w-full h-full absolute top-0 left-0 p-8 pointer-events-none opacity-50 flex items-center"
+    class="pointer-events-none absolute top-0 left-0 flex h-full w-full items-center p-8 opacity-50"
   >
     <img class="h-full max-h-24" src="./assets/svg/move-arrows.svg" />
   </div>
diff --git a/UI/InputElement/ValidatedInput.svelte b/UI/InputElement/ValidatedInput.svelte
index 2f59bd8d7..3656e819f 100644
--- a/UI/InputElement/ValidatedInput.svelte
+++ b/UI/InputElement/ValidatedInput.svelte
@@ -106,7 +106,7 @@
       placeholder={_placeholder}
     />
     {#if !$isValid}
-      <ExclamationIcon class="h-6 w-6 -ml-6" />
+      <ExclamationIcon class="-ml-6 h-6 w-6" />
     {/if}
 
     {#if unit !== undefined}
diff --git a/UI/InputElement/Validators.ts b/UI/InputElement/Validators.ts
index 67f0ee807..c340fc355 100644
--- a/UI/InputElement/Validators.ts
+++ b/UI/InputElement/Validators.ts
@@ -19,7 +19,7 @@ import BaseUIElement from "../BaseUIElement"
 import Combine from "../Base/Combine"
 import Title from "../Base/Title"
 
-export type ValidatorType = typeof Validators.availableTypes[number]
+export type ValidatorType = (typeof Validators.availableTypes)[number]
 
 export default class Validators {
     public static readonly availableTypes = [
diff --git a/UI/Map/RasterLayerOverview.svelte b/UI/Map/RasterLayerOverview.svelte
index 2eb2ac869..7cef37b0e 100644
--- a/UI/Map/RasterLayerOverview.svelte
+++ b/UI/Map/RasterLayerOverview.svelte
@@ -50,14 +50,14 @@
   }
 </script>
 
-<div class="h-full flex flex-col">
+<div class="flex h-full flex-col">
   <slot name="title">
     <h2>
       <Tr t={Translations.t.general.backgroundMap} />
     </h2>
   </slot>
 
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-2 h-full w-full">
+  <div class="grid h-full w-full grid-cols-1 gap-2 md:grid-cols-2">
     <RasterLayerPicker
       availableLayers={photoLayers}
       favourite={getPref("photo")}
diff --git a/UI/Map/RasterLayerPicker.svelte b/UI/Map/RasterLayerPicker.svelte
index 3ac0e2db7..826d9b6f0 100644
--- a/UI/Map/RasterLayerPicker.svelte
+++ b/UI/Map/RasterLayerPicker.svelte
@@ -66,13 +66,13 @@
 </script>
 
 {#if hasLayers}
-  <div class="h-full w-full flex flex-col">
+  <div class="flex h-full w-full flex-col">
     <button
       on:click={() => {
         mapproperties.rasterLayer.setData(rasterLayer.data)
         dispatch("appliedLayer")
       }}
-      class="w-full h-full m-0 p-0"
+      class="m-0 h-full w-full p-0"
     >
       <OverlayMap
         rasterLayer={rasterLayerOnMap}
diff --git a/UI/Map/ShowDataLayer.ts b/UI/Map/ShowDataLayer.ts
index 665a831a9..a99b14953 100644
--- a/UI/Map/ShowDataLayer.ts
+++ b/UI/Map/ShowDataLayer.ts
@@ -240,7 +240,7 @@ class LineRenderingLayer {
      */
     private calculatePropsFor(
         properties: Record<string, string>
-    ): Partial<Record<typeof LineRenderingLayer.lineConfigKeys[number], string>> {
+    ): Partial<Record<(typeof LineRenderingLayer.lineConfigKeys)[number], string>> {
         const config = this._config
 
         const calculatedProps: Record<string, string | number> = {}
diff --git a/UI/Popup/AddNewPoint/AddNewPoint.svelte b/UI/Popup/AddNewPoint/AddNewPoint.svelte
index 4ff79ef76..597d3538d 100644
--- a/UI/Popup/AddNewPoint/AddNewPoint.svelte
+++ b/UI/Popup/AddNewPoint/AddNewPoint.svelte
@@ -167,7 +167,7 @@
     />
   {:else if !$layerIsDisplayed}
     <!-- Check that the layer is enabled, so that we don't add a duplicate -->
-    <div class="alert flex  justify-center items-center">
+    <div class="alert flex items-center justify-center">
       <EyeOffIcon class="w-8" />
       <Tr
         t={Translations.t.general.add.layerNotEnabled.Subs({ layer: selectedPreset.layer.name })}
@@ -187,7 +187,7 @@
       </button>
 
       <button
-        class="flex w-full gap-x-1 primary"
+        class="primary flex w-full gap-x-1"
         on:click={() => {
           layerIsDisplayed.setData(true)
           abort()
@@ -199,13 +199,13 @@
     </div>
   {:else if $layerHasFilters}
     <!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
-    <div class="alert flex justify-center items-center">
+    <div class="alert flex items-center justify-center">
       <EyeOffIcon class="w-8" />
       <Tr t={Translations.t.general.add.disableFiltersExplanation} />
     </div>
     <div class="flex flex-wrap-reverse md:flex-nowrap">
       <button
-        class="flex w-full gap-x-1 primary"
+        class="primary flex w-full gap-x-1"
         on:click={() => {
           abort()
           state.layerState.filteredLayers.get(selectedPreset.layer.id).disableAllFilters()
@@ -249,7 +249,7 @@
       </h3>
       <span class="flex flex-wrap items-stretch">
         {#each selectedPreset.preset.exampleImages as src}
-          <img {src} class="h-64 m-1 w-auto rounded-lg" />
+          <img {src} class="m-1 h-64 w-auto rounded-lg" />
         {/each}
       </span>
     {/if}
@@ -267,7 +267,7 @@
       <NextButton on:click={() => (confirmedCategory = true)} clss="primary w-full">
         <div slot="image" class="relative">
           <FromHtml src={selectedPreset.icon} />
-          <img class="absolute bottom-0 right-0 w-4 h-4" src="./assets/svg/confirm.svg" />
+          <img class="absolute bottom-0 right-0 h-4 w-4" src="./assets/svg/confirm.svg" />
         </div>
         <div class="w-full">
           <Tr t={selectedPreset.text} />
@@ -284,7 +284,7 @@
       <img
         slot="image"
         src={_globalFilter[checkedOfGlobalFilters].onNewPoint?.icon ?? "./assets/svg/confirm.svg"}
-        class="w-12 h-12"
+        class="h-12 w-12"
       />
       <Tr
         slot="message"
@@ -299,12 +299,12 @@
         abort()
       }}
     >
-      <img slot="image" src="./assets/svg/close.svg" class="w-8 h-8" />
+      <img slot="image" src="./assets/svg/close.svg" class="h-8 w-8" />
       <Tr slot="message" t={Translations.t.general.cancel} />
     </SubtleButton>
   {:else if !creating}
     <div class="relative w-full p-1">
-      <div class="w-full h-96 max-h-screen rounded-xl overflow-hidden">
+      <div class="h-96 max-h-screen w-full overflow-hidden rounded-xl">
         <NewPointLocationInput
           value={preciseCoordinate}
           snappedTo={snappedToObject}
@@ -318,7 +318,7 @@
         <MapControlButton
           on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
         >
-          <Square3Stack3dIcon class="w-6 h-6" />
+          <Square3Stack3dIcon class="h-6 w-6" />
         </MapControlButton>
       </div>
     </div>
@@ -328,7 +328,7 @@
       </BackButton>
 
       <NextButton on:click={confirm} clss="primary w-full">
-        <div class="w-full flex justify-end gap-x-2">
+        <div class="flex w-full justify-end gap-x-2">
           <Tr t={Translations.t.general.add.confirmLocation} />
         </div>
       </NextButton>
diff --git a/UI/Popup/AddNewPoint/PresetList.svelte b/UI/Popup/AddNewPoint/PresetList.svelte
index e247a1f6f..05c997370 100644
--- a/UI/Popup/AddNewPoint/PresetList.svelte
+++ b/UI/Popup/AddNewPoint/PresetList.svelte
@@ -70,7 +70,7 @@
   }>()
 </script>
 
-<div class="flex flex-col w-full">
+<div class="flex w-full flex-col">
   <h2 class="mr-12">
     <!-- The title gets a big right margin to give place to the 'close'-button, see https://github.com/pietervdvn/MapComplete/issues/1445 -->
     <Tr t={Translations.t.general.add.intro} />
diff --git a/UI/Popup/CreateNewNote.svelte b/UI/Popup/CreateNewNote.svelte
index b4e87e63c..db6c8d1d8 100644
--- a/UI/Popup/CreateNewNote.svelte
+++ b/UI/Popup/CreateNewNote.svelte
@@ -89,14 +89,14 @@
           <Tr t={Translations.t.notes.noteLayerHasFilters} />
         </div>
         <SubtleButton on:click={() => notelayer.disableAllFilters()}>
-          <img slot="image" src="./assets/svg/filter.svg" class="w-8 h-8 mr-4" />
+          <img slot="image" src="./assets/svg/filter.svg" class="mr-4 h-8 w-8" />
           <Tr slot="message" t={Translations.t.notes.disableAllNoteFilters} />
         </SubtleButton>
       </div>
     {:else}
       <div>
         <Tr t={Translations.t.notes.createNoteIntro} />
-        <div class="border rounded-sm border-grey-500">
+        <div class="border-grey-500 rounded-sm border">
           <div class="w-full p-1">
             <ValidatedInput type="text" value={comment} />
           </div>
@@ -110,7 +110,7 @@
 
           {#if $comment.length >= 3}
             <SubtleButton on:click={uploadNote}>
-              <img slot="image" src="./assets/svg/addSmall.svg" class="w-8 h-8 mr-4" />
+              <img slot="image" src="./assets/svg/addSmall.svg" class="mr-4 h-8 w-8" />
               <Tr slot="message" t={Translations.t.notes.createNote} />
             </SubtleButton>
           {:else}
@@ -127,7 +127,7 @@
         <Tr t={Translations.t.notes.noteLayerNotEnabled} />
       </div>
       <SubtleButton on:click={enableNoteLayer}>
-        <img slot="image" src="./assets/svg/layers.svg" class="w-8 h-8 mr-4" />
+        <img slot="image" src="./assets/svg/layers.svg" class="mr-4 h-8 w-8" />
         <Tr slot="message" t={Translations.t.notes.noteLayerDoEnable} />
       </SubtleButton>
     </div>
diff --git a/UI/Popup/DeleteFlow/DeleteWizard.svelte b/UI/Popup/DeleteFlow/DeleteWizard.svelte
index 47ba89532..f9553cd36 100644
--- a/UI/Popup/DeleteFlow/DeleteWizard.svelte
+++ b/UI/Popup/DeleteFlow/DeleteWizard.svelte
@@ -82,8 +82,8 @@
 </script>
 
 {#if $canBeDeleted === false && !hasSoftDeletion}
-  <div class="flex low-interaction">
-    <InformationCircleIcon class="w-6 h-6" />
+  <div class="low-interaction flex">
+    <InformationCircleIcon class="h-6 w-6" />
     <Tr t={$canBeDeletedReason} />
     <Tr class="subtle" t={t.useSomethingElse} />
   </div>
@@ -96,7 +96,7 @@
           currentState = "confirm"
         }}
       >
-        <TrashIcon class="w-6 h-6" />
+        <TrashIcon class="h-6 w-6" />
         <Tr t={t.delete} />
       </button>
     {:else if currentState === "confirm"}
@@ -111,10 +111,10 @@
         <button
           slot="save-button"
           on:click={onDelete}
-          class={(selectedTags === undefined ? "disabled" : "") + " flex primary bg-red-600"}
+          class={(selectedTags === undefined ? "disabled" : "") + " primary flex bg-red-600"}
         >
           <TrashIcon
-            class={"w-6 h-6 rounded-full p-1 ml-1 mr-2 " +
+            class={"ml-1 mr-2 h-6 w-6 rounded-full p-1 " +
               (selectedTags !== undefined ? "bg-red-600" : "")}
           />
           <Tr t={t.delete} />
@@ -124,7 +124,7 @@
         </button>
         <XCircleIcon
           slot="upper-right"
-          class="w-8 h-8 cursor-pointer"
+          class="h-8 w-8 cursor-pointer"
           on:click={() => {
             currentState = "start"
           }}
@@ -147,8 +147,8 @@
     {:else}
       <!-- currentState === 'deleted' -->
 
-      <div class="flex low-interaction">
-        <TrashIcon class="w-6 h-6" />
+      <div class="low-interaction flex">
+        <TrashIcon class="h-6 w-6" />
         <Tr t={t.isDeleted} />
       </div>
     {/if}
diff --git a/UI/Popup/ImportButtons/ImportFlow.svelte b/UI/Popup/ImportButtons/ImportFlow.svelte
index 08dbba7c5..415d4b897 100644
--- a/UI/Popup/ImportButtons/ImportFlow.svelte
+++ b/UI/Popup/ImportButtons/ImportFlow.svelte
@@ -46,7 +46,7 @@
     {/if}
   {:else if !$isDisplayed}
     <!-- Check that the layer is enabled, so that we don't add a duplicate -->
-    <div class="alert flex  justify-center items-center">
+    <div class="alert flex items-center justify-center">
       <EyeOffIcon class="w-8" />
       <Tr
         t={Translations.t.general.add.layerNotEnabled.Subs({
@@ -68,7 +68,7 @@
       </button>
 
       <button
-        class="flex w-full gap-x-1 primary"
+        class="primary flex w-full gap-x-1"
         on:click={() => {
           isDisplayed.setData(true)
           abort()
@@ -84,13 +84,13 @@
     </div>
   {:else if $hasFilter}
     <!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
-    <div class="alert flex justify-center items-center">
+    <div class="alert flex items-center justify-center">
       <EyeOffIcon class="w-8" />
       <Tr t={Translations.t.general.add.disableFiltersExplanation} />
     </div>
     <div class="flex flex-wrap-reverse md:flex-nowrap">
       <button
-        class="flex w-full gap-x-1 primary"
+        class="primary flex w-full gap-x-1"
         on:click={() => {
           abort()
           importFlow.targetLayer.disableAllFilters()
@@ -118,14 +118,14 @@
     <NextButton clss="primary w-full" on:click={() => (currentFlowStep = "confirm")}>
       <slot name="start-flow-text">
         {#if importFlow?.args?.icon}
-          <img class="w-8 h-8" src={importFlow.args.icon} />
+          <img class="h-8 w-8" src={importFlow.args.icon} />
         {/if}
         {importFlow.args.text}
       </slot>
     </NextButton>
   {:else if currentFlowStep === "confirm"}
-    <div class="h-full w-full flex flex-col">
-      <div class="w-full h-full">
+    <div class="flex h-full w-full flex-col">
+      <div class="h-full w-full">
         <slot name="map" />
       </div>
       <div class="flex flex-col-reverse md:flex-row">
@@ -139,7 +139,7 @@
             dispatch("confirm")
           }}
         >
-          <span slot="image" class="w-8 h-8 pr-4">
+          <span slot="image" class="h-8 w-8 pr-4">
             {#if importFlow.args.icon}
               <img src={importFlow.args.icon} />
             {:else}
diff --git a/UI/Popup/ImportButtons/PointImportFlow.svelte b/UI/Popup/ImportButtons/PointImportFlow.svelte
index a29b42d5e..6e1bb9053 100644
--- a/UI/Popup/ImportButtons/PointImportFlow.svelte
+++ b/UI/Popup/ImportButtons/PointImportFlow.svelte
@@ -56,7 +56,7 @@
       on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
       cls="absolute bottom-0"
     >
-      <Square3Stack3dIcon class="w-6 h-6" />
+      <Square3Stack3dIcon class="h-6 w-6" />
     </MapControlButton>
   </div>
 </ImportFlow>
diff --git a/UI/Popup/ImportButtons/WayImportFlow.svelte b/UI/Popup/ImportButtons/WayImportFlow.svelte
index ea280a599..5464ba21e 100644
--- a/UI/Popup/ImportButtons/WayImportFlow.svelte
+++ b/UI/Popup/ImportButtons/WayImportFlow.svelte
@@ -54,7 +54,7 @@
       on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
       cls="absolute bottom-0"
     >
-      <Square3Stack3dIcon class="w-6 h-6" />
+      <Square3Stack3dIcon class="h-6 w-6" />
     </MapControlButton>
   </div>
 </ImportFlow>
diff --git a/UI/Popup/TagRendering/TagRenderingEditable.svelte b/UI/Popup/TagRendering/TagRenderingEditable.svelte
index b6dbcd988..7da21475d 100644
--- a/UI/Popup/TagRendering/TagRenderingEditable.svelte
+++ b/UI/Popup/TagRendering/TagRenderingEditable.svelte
@@ -81,27 +81,27 @@
         </button>
         <XCircleIcon
           slot="upper-right"
-          class="w-8 h-8 cursor-pointer"
+          class="h-8 w-8 cursor-pointer"
           on:click={() => {
             editMode = false
           }}
         />
       </TagRenderingQuestion>
     {:else}
-      <div class="flex justify-between low-interaction items-center rounded px-2 overflow-hidden">
+      <div class="low-interaction flex items-center justify-between overflow-hidden rounded px-2">
         <TagRenderingAnswer {config} {tags} {selectedElement} {state} {layer} />
         <button
           on:click={() => {
             editMode = true
           }}
-          class="shrink-0 w-8 h-8 rounded-full p-1 secondary self-start"
+          class="secondary h-8 w-8 shrink-0 self-start rounded-full p-1"
         >
           <PencilAltIcon />
         </button>
       </div>
     {/if}
   {:else}
-    <div class="p-2 overflow-hidden">
+    <div class="overflow-hidden p-2">
       <TagRenderingAnswer {config} {tags} {selectedElement} {state} {layer} />
     </div>
   {/if}
diff --git a/UI/Popup/TagRendering/TagRenderingQuestion.svelte b/UI/Popup/TagRendering/TagRenderingQuestion.svelte
index d286b076f..52dad91e2 100644
--- a/UI/Popup/TagRendering/TagRenderingQuestion.svelte
+++ b/UI/Popup/TagRendering/TagRenderingQuestion.svelte
@@ -139,7 +139,7 @@
 </script>
 
 {#if config.question !== undefined}
-  <div class="interactive border-interactive p-1 px-2 flex flex-col">
+  <div class="interactive border-interactive flex flex-col p-1 px-2">
     <div class="flex justify-between">
       <span class="font-bold">
         <SpecialTranslation t={config.question} {tags} {state} {layer} feature={selectedElement} />
@@ -161,7 +161,7 @@
 
     {#if config.mappings?.length >= 8}
       <div class="flex w-full">
-        <img src="./assets/svg/search.svg" class="w-6 h-6" />
+        <img src="./assets/svg/search.svg" class="h-6 w-6" />
         <input type="text" bind:value={$searchTerm} class="w-full" />
       </div>
     {/if}
@@ -262,7 +262,7 @@
     <LoginToggle {state}>
       <Loading slot="loading" />
       <SubtleButton slot="not-logged-in" on:click={() => state.osmConnection.AttemptLogin()}>
-        <img slot="image" src="./assets/svg/login.svg" class="w-8 h-8" />
+        <img slot="image" src="./assets/svg/login.svg" class="h-8 w-8" />
         <Tr t={Translations.t.general.loginToStart} slot="message" />
       </SubtleButton>
       {#if $feedback !== undefined}
@@ -270,7 +270,7 @@
           <Tr t={$feedback} />
         </div>
       {/if}
-      <div class="flex justify-end flex-wrap-reverse sm:flex-nowrap items-stretch">
+      <div class="flex flex-wrap-reverse items-stretch justify-end sm:flex-nowrap">
         <!-- TagRenderingQuestion-buttons -->
         <slot name="cancel" />
         <slot name="save-button" {selectedTags}>
@@ -283,7 +283,7 @@
         </slot>
       </div>
       {#if UserRelatedState.SHOW_TAGS_VALUES.indexOf($showTags) >= 0 || ($showTags === "" && numberOfCs >= Constants.userJourney.tagsVisibleAt) || $featureSwitchIsTesting || $featureSwitchIsDebugging}
-        <span class="flex justify-between flex-wrap">
+        <span class="flex flex-wrap justify-between">
           <TagHint {state} tags={selectedTags} currentProperties={$tags} />
           <span class="flex flex-wrap">
             {#if $featureSwitchIsTesting}
diff --git a/UI/StylesheetTestGui.svelte b/UI/StylesheetTestGui.svelte
index a54b2e866..9a0705c00 100644
--- a/UI/StylesheetTestGui.svelte
+++ b/UI/StylesheetTestGui.svelte
@@ -13,8 +13,7 @@
     <h2>Normal background</h2>
     There are a few styles, such as the
     <span class="literal-code">normal-background</span>
-    -style which is used if there is nothing special going on. Some general information, with at
-    most
+    -style which is used if there is nothing special going on. Some general information, with at most
     <a href="https://example.com" target="_blank">a link to someplace</a>
     .
     <span class="alert">Alert: something went wrong</span>
@@ -27,7 +26,7 @@
     <h2>Low interaction</h2>
     <p>
       There are <span class="literal-code">low-interaction</span>
-       areas, where some buttons might appear.
+      areas, where some buttons might appear.
     </p>
 
     <div class="flex">
@@ -80,7 +79,7 @@
     <h2>Interactive area</h2>
     <p>
       There are <span class="literal-code">interactive</span>
-       areas, where many buttons and input elements will appear.
+      areas, where many buttons and input elements will appear.
     </p>
 
     <div class="flex">
diff --git a/UI/ThemeViewGUI.svelte b/UI/ThemeViewGUI.svelte
index 195e82d01..76bcb1b10 100644
--- a/UI/ThemeViewGUI.svelte
+++ b/UI/ThemeViewGUI.svelte
@@ -108,14 +108,14 @@
   )
 </script>
 
-<div class="h-screen w-screen absolute top-0 left-0 overflow-hidden">
+<div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
   <MaplibreMap map={maplibremap} />
 </div>
 
-<div class="absolute top-0 left-0 w-full pointer-events-none">
+<div class="pointer-events-none absolute top-0 left-0 w-full">
   <!-- Top components -->
   <If condition={state.featureSwitches.featureSwitchSearch}>
-    <div class="max-[480px]:w-full float-right mt-1 px-1 sm:m-2 pointer-events-auto">
+    <div class="pointer-events-auto float-right mt-1 px-1 max-[480px]:w-full sm:m-2">
       <Geosearch
         bounds={state.mapProperties.bounds}
         perLayer={state.perLayer}
@@ -124,17 +124,17 @@
       />
     </div>
   </If>
-  <div class="float-left m-1 sm:mt-2 flex flex-col">
+  <div class="float-left m-1 flex flex-col sm:mt-2">
     <MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}>
-      <div class="flex m-0.5 mx-1 sm:mx-1 md:mx-2 items-center cursor-pointer max-[480px]:w-full">
-        <img class="w-6 h-6 md:w-8 md:h-8 block mr-0.5 sm:mr-1 md:mr-2" src={layout.icon} />
+      <div class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 md:mx-2">
+        <img class="mr-0.5 block h-6 w-6 sm:mr-1 md:mr-2 md:h-8 md:w-8" src={layout.icon} />
         <b class="mr-1">
           <Tr t={layout.title} />
         </b>
       </div>
     </MapControlButton>
     <MapControlButton on:click={() => state.guistate.menuIsOpened.setData(true)}>
-      <MenuIcon class="w-8 h-8 cursor-pointer" />
+      <MenuIcon class="h-8 w-8 cursor-pointer" />
     </MapControlButton>
     {#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
       <MapControlButton
@@ -157,17 +157,17 @@
   </div>
 </div>
 
-<div class="absolute bottom-0 left-0 mb-4 w-screen pointer-events-none">
-  <div class="w-full flex justify-between px-4 items-end">
+<div class="pointer-events-none absolute bottom-0 left-0 mb-4 w-screen">
+  <div class="flex w-full items-end justify-between px-4">
     <div class="flex">
       <!-- bottom left elements -->
       <MapControlButton
         on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
       >
-        <Square3Stack3dIcon class="w-6 h-6" />
+        <Square3Stack3dIcon class="h-6 w-6" />
       </MapControlButton>
       <a
-        class="pointer-events-auto opacity-50 hover:opacity-100 text-white cursor-pointer bg-black-transparent pl-1 pr-2 rounded-2xl h-fit max-h-12 overflow-hidden self-end"
+        class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
         on:click={() => {
           state.guistate.themeViewTab.setData("copyright")
           state.guistate.themeIsOpened.setData(true)
@@ -180,7 +180,7 @@
     <div class="flex flex-col items-end">
       <!-- bottom right elements -->
       <If condition={state.floors.map((f) => f.length > 1)}>
-        <div class="mr-0.5 pointer-events-auto">
+        <div class="pointer-events-auto mr-0.5">
           <LevelSelector
             floors={state.floors}
             layerState={state.layerState}
@@ -219,7 +219,7 @@
       selectedElement.setData(undefined)
     }}
   >
-    <div class="absolute flex flex-col h-full w-full normal-background">
+    <div class="normal-background absolute flex h-full w-full flex-col">
       <ToSvelte construct={new VariableUiElement(selectedElementTitle)}>
         <!-- Title -->
       </ToSvelte>
@@ -253,13 +253,13 @@
     <TabbedGroup tab={state.guistate.themeViewTabIndex}>
       <div slot="post-tablist">
         <XCircleIcon
-          class="w-8 h-8 mr-2"
+          class="mr-2 h-8 w-8"
           on:click={() => state.guistate.themeIsOpened.setData(false)}
         />
       </div>
 
       <div class="flex" slot="title0">
-        <img class="w-4 h-4 block" src={layout.icon} />
+        <img class="block h-4 w-4" src={layout.icon} />
         <Tr t={layout.title} />
       </div>
 
@@ -274,7 +274,7 @@
         </If>
       </div>
 
-      <div class="flex flex-col m-2" slot="content1">
+      <div class="m-2 flex flex-col" slot="content1">
         {#each layout.layers as layer}
           <Filterview
             zoomlevel={state.mapProperties.zoom}
@@ -320,7 +320,7 @@
 <IfHidden condition={state.guistate.backgroundLayerSelectionIsOpened}>
   <!-- background layer selector -->
   <FloatOver on:close={() => state.guistate.backgroundLayerSelectionIsOpened.setData(false)}>
-    <div class="p-2 h-full">
+    <div class="h-full p-2">
       <RasterLayerOverview
         userstate={state.userRelatedState}
         mapproperties={state.mapProperties}
@@ -339,7 +339,7 @@
     <TabbedGroup tab={state.guistate.menuViewTabIndex}>
       <div slot="post-tablist">
         <XCircleIcon
-          class="w-8 h-8 mr-2"
+          class="mr-2 h-8 w-8"
           on:click={() => state.guistate.menuIsOpened.setData(false)}
         />
       </div>
@@ -347,38 +347,38 @@
         <Tr t={Translations.t.general.menu.aboutMapComplete} />
       </div>
 
-      <div class="flex flex-col m-2 links-as-button links-w-full gap-y-1" slot="content0">
+      <div class="links-as-button links-w-full m-2 flex flex-col gap-y-1" slot="content0">
         <Tr t={Translations.t.general.aboutMapComplete.intro} />
 
         <a class="flex" href={Utils.HomepageLink()}>
-          <img class="w-6 h-6" src="./assets/svg/add.svg" />
+          <img class="h-6 w-6" src="./assets/svg/add.svg" />
           <Tr t={Translations.t.general.backToIndex} />
         </a>
 
         <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
-          <img class="w-6 h-6" src="./assets/svg/bug.svg" />
+          <img class="h-6 w-6" src="./assets/svg/bug.svg" />
           <Tr t={Translations.t.general.attribution.openIssueTracker} />
         </a>
 
         <a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
-          <img class="w-6 h-6" src="./assets/svg/mastodon.svg" />
+          <img class="h-6 w-6" src="./assets/svg/mastodon.svg" />
           <Tr t={Translations.t.general.attribution.followOnMastodon} />
         </a>
 
         <a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
-          <img class="w-6 h-6" src="./assets/svg/liberapay.svg" />
+          <img class="h-6 w-6" src="./assets/svg/liberapay.svg" />
           <Tr t={Translations.t.general.attribution.donate} />
         </a>
 
         <a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank">
-          <img class="w-6 h-6" src="./assets/svg/statistics.svg" />
+          <img class="h-6 w-6" src="./assets/svg/statistics.svg" />
           <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: "MapComplete" })} />
         </a>
         {Constants.vNumber}
       </div>
 
       <div class="flex" slot="title1">
-        <CogIcon class="w-6 h-6" />
+        <CogIcon class="h-6 w-6" />
         <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
       </div>
 
@@ -420,7 +420,7 @@
       </div>
 
       <Tr slot="title4" t={Translations.t.advanced.title} />
-      <div class="flex flex-col m-2" slot="content4">
+      <div class="m-2 flex flex-col" slot="content4">
         <OpenIdEditor mapProperties={state.mapProperties} />
         <ToSvelte
           construct={() =>
diff --git a/UI/Wikipedia/WikipediaArticle.svelte b/UI/Wikipedia/WikipediaArticle.svelte
index 1fcc16188..dd0f61aa0 100644
--- a/UI/Wikipedia/WikipediaArticle.svelte
+++ b/UI/Wikipedia/WikipediaArticle.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <a class="flex" href={$wikipediaDetails.articleUrl} rel="noreferrer" target="_blank">
-  <img class="w-6 h-6" src="./assets/svg/wikipedia.svg" />
+  <img class="h-6 w-6" src="./assets/svg/wikipedia.svg" />
   <Tr t={Translations.t.general.wikipedia.fromWikipedia} />
 </a>