Some style tweaks

UI/DefaultGUI.ts

@@ -231,11 +231,12 @@ export default class DefaultGUI {
             .SetClass("flex items-center justify-center normal-background h-full")
             .AttachTo("on-small-screen")
 
-        Toggle.If(state.featureSwitchSearch, () =>
+        new Combine([Toggle.If(state.featureSwitchSearch, () =>
             new SearchAndGo(state).SetClass(
                 "shadow rounded-full h-min w-full overflow-hidden sm:max-w-sm pointer-events-auto"
             )
-        ).AttachTo("top-right")
+        )])
+            .AttachTo("top-right")
 
         new LeftControls(state, guiState).AttachTo("bottom-left")
         new RightControls(state).AttachTo("bottom-right")

Utils.ts

@@ -831,7 +831,6 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
             return this.externalDownloadFunction(url, headers)
         }
 
-        console.trace("Fetching XHR", url)
         return new Promise((resolve, reject) => {
             const xhr = new XMLHttpRequest()
             xhr.onload = () => {

css/index-tailwind-output.css

@@ -648,14 +648,18 @@ video {
   top: 14rem;
 }
 
-.top-3 {
-  top: 0.75rem;
+.top-12 {
+  top: 3rem;
 }
 
 .left-3 {
   left: 0.75rem;
 }
 
+.top-3 {
+  top: 0.75rem;
+}
+
 .right-2 {
   right: 0.5rem;
 }
@@ -736,14 +740,14 @@ video {
   margin: 0.25rem;
 }
 
-.m-4 {
-  margin: 1rem;
-}
-
 .m-5 {
   margin: 1.25rem;
 }
 
+.m-4 {
+  margin: 1rem;
+}
+
 .m-2 {
   margin: 0.5rem;
 }
@@ -1020,10 +1024,6 @@ video {
   max-height: 8rem;
 }
 
-.max-h-4 {
-  max-height: 1rem;
-}
-
 .max-h-7 {
   max-height: 1.75rem;
 }
@@ -1236,10 +1236,6 @@ video {
   align-items: center;
 }
 
-.items-baseline {
-  align-items: baseline;
-}
-
 .items-stretch {
   align-items: stretch;
 }
@@ -1378,11 +1374,6 @@ video {
   border-bottom-width: 1px;
 }
 
-.border-gray-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity));
-}
-
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -1413,6 +1404,11 @@ video {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
 .border-opacity-50 {
   --tw-border-opacity: 0.5;
 }
@@ -1501,6 +1497,10 @@ video {
   padding-right: 1rem;
 }
 
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -1561,10 +1561,6 @@ video {
   padding-right: 1rem;
 }
 
-.pl-3 {
-  padding-left: 0.75rem;
-}
-
 .pr-0 {
   padding-right: 0px;
 }
@@ -1700,10 +1696,6 @@ video {
   opacity: 0.5;
 }
 
-.opacity-0 {
-  opacity: 0;
-}
-
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -1788,10 +1780,6 @@ video {
   transition-duration: 150ms;
 }
 
-.duration-500 {
-  transition-duration: 500ms;
-}
-
 .z-above-map {
   z-index: 10000;
 }
@@ -2566,6 +2554,10 @@ input {
 }
 
 @media (min-width: 640px) {
+  .sm\:top-3 {
+    top: 0.75rem;
+  }
+
   .sm\:mx-auto {
     margin-left: auto;
     margin-right: auto;
@@ -2587,12 +2579,14 @@ input {
     height: 6rem;
   }
 
-  .sm\:w-24 {
-    width: 6rem;
+  .sm\:w-fit {
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
   }
 
-  .sm\:w-auto {
-    width: auto;
+  .sm\:w-24 {
+    width: 6rem;
   }
 
   .sm\:max-w-sm {
@@ -2647,8 +2641,8 @@ input {
     padding: 0.5rem;
   }
 
-  .sm\:pl-2 {
-    padding-left: 0.5rem;
+  .sm\:pl-0 {
+    padding-left: 0px;
   }
 
   .sm\:pt-1 {
@@ -2728,11 +2722,6 @@ input {
     width: auto;
   }
 
-  .md\:w-max {
-    width: -webkit-max-content;
-    width: max-content;
-  }
-
   .md\:grid-flow-row {
     grid-auto-flow: row;
   }

theme.html

@@ -50,8 +50,8 @@
 <div class="very-small-screen fixed inset-0 block z-above-controls" id="on-small-screen"></div>
 <div class="fixed inset-0 block z-above-controls hidden hidden-on-very-small-screen md:w-1/3" style="min-width: 28rem" id="fullscreen"></div>
 
-<div class="absolute top-3 left-3 rounded-3xl z-above-map" id="top-left"></div>
-<div class="absolute top-3 right-2 rounded-3xl z-above-map" id="top-right"></div>
+<div class="absolute top-12 sm:top-3 left-3 rounded-3xl z-above-map" id="top-left"></div>
+<div class="absolute top-3 right-2 rounded-3xl z-above-map pl-3 sm:pl-0 w-full sm:w-fit" id="top-right"></div>
 
 <div class="absolute bottom-3 left-3 rounded-3xl z-above-map" id="bottom-left"></div>
 <div class="absolute bottom-3 right-2 rounded-3xl z-above-map" id="bottom-right"></div>