Tweak loading screen layout

scripts/generateLayouts.ts

@@ -534,7 +534,7 @@ class GenerateLayouts extends Script {
             )
             .replace(
                 /<!-- IMAGE-START -->.*<!-- IMAGE-END -->/s,
-                "<img class='p-0 mb-8 h-32 w-32 self-start' src='" + icon + "' />"
+                "<img class='p-0 h-32 w-32 self-start' src='" + icon + "' />"
             )
             .replace(
                 /.*\/src\/index\.ts.*/,

src/index.ts

@@ -44,6 +44,9 @@ async function main() {
         const state = new ThemeViewState(layout, availableLayers)
         const main = new SvelteUIElement(ThemeViewGUI, { state })
         main.AttachTo("maindiv")
+        Array.from(document.getElementsByClassName("delete-on-load")).forEach(el => {
+            el.parentElement.removeChild(el)
+        })
     } catch (err) {
         console.error("Error while initializing: ", err, err.stack)
         const customDefinition = DetermineLayout.getCustomDefinition()

src/index_theme.ts.template

@@ -39,6 +39,9 @@ async function main() {
         const state = new ThemeViewState(new LayoutConfig(<any> layout), availableLayers)
         const main = new SvelteUIElement(ThemeViewGUI, { state })
         main.AttachTo("maindiv")
+        Array.from(document.getElementsByClassName("delete-on-load")).forEach(el => {
+                    el.parentElement.removeChild(el)
+                })
     }
 }
 main()

theme.html

@@ -68,19 +68,22 @@
                 </p>
             </div>
 
-            <div class="flex justify-between items-end w-full">
+
-                
-            <!-- IMAGE-START -->
-            <img aria-hidden="true" class="p-4 h-32 w-32 self-start" src="./assets/svg/add.svg">
-            <!-- IMAGE-END -->
-                <div class="h-min subtle flex flex-col items-end"> 
-                Version
-                </div>
-                
-            </div>
         </div>
     </div>
 </div>
+
+<div class="flex justify-between items-end w-full absolute bottom-0 p-4 h-fit delete-on-load">
+
+  <!-- IMAGE-START -->
+  <img aria-hidden="true" class="p-4 h-32 w-32 self-start" src="./assets/svg/add.svg">
+  <!-- IMAGE-END -->
+  <div class="h-min subtle flex flex-col items-end">
+    Version
+  </div>
+
+</div>
+
 <div aria-hidden="true" id="belowmap" class="absolute top-0 left-0 -z-10">Below</div>
 <script src="./src/UI/RemoveOtherLanguages.ts" type="module"></script>
 <script async src="./src/InstallServiceWorker.ts" type="module"></script>