Slightly clean up styling

package-lock.json

@@ -24014,4 +24014,4 @@
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
     }
   }
-}
+}

public/css/index-tailwind-output.css

@@ -777,6 +777,10 @@ video {
   float: left;
 }
 
+.m-8 {
+  margin: 2rem;
+}
+
 .m-4 {
   margin: 1rem;
 }
@@ -789,10 +793,6 @@ video {
   margin: 0px;
 }
 
-.m-8 {
-  margin: 2rem;
-}
-
 .m-2 {
   margin: 0.5rem;
 }
@@ -896,6 +896,10 @@ video {
   margin-right: 4rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -928,10 +932,6 @@ video {
   margin-right: 0.25rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1127,14 +1127,14 @@ video {
   height: 50%;
 }
 
-.h-7 {
-  height: 1.75rem;
-}
-
 .h-3 {
   height: 0.75rem;
 }
 
+.h-7 {
+  height: 1.75rem;
+}
+
 .h-11 {
   height: 2.75rem;
 }
@@ -1163,6 +1163,10 @@ video {
   height: 20rem;
 }
 
+.h-5\/6 {
+  height: 83.333333%;
+}
+
 .h-56 {
   height: 14rem;
 }
@@ -1233,14 +1237,14 @@ video {
   width: 1rem;
 }
 
-.w-7 {
-  width: 1.75rem;
-}
-
 .w-3 {
   width: 0.75rem;
 }
 
+.w-7 {
+  width: 1.75rem;
+}
+
 .w-11 {
   width: 2.75rem;
 }
@@ -1266,6 +1270,14 @@ video {
   width: 4rem;
 }
 
+.w-5\/6 {
+  width: 83.333333%;
+}
+
+.w-1\/6 {
+  width: 16.666667%;
+}
+
 .w-min {
   width: -webkit-min-content;
   width: min-content;

src/UI/Studio/EditLayer.svelte

@@ -185,22 +185,25 @@
           <Region configs={perRegion["expert"]} {state} />
         </div>
         <div slot="title5">Configuration file</div>
-        <div slot="content5" class="h-full">
+        <div slot="content5" class="flex h-full flex-col">
           <div>
             Below, you'll find the raw configuration file in `.json`-format. This is mostly for
             debugging purposes, but you can also edit the file directly if you want.
           </div>
-          <div class="literal-code h-full w-full">
-            <RawEditor {state} />
-          </div>
-
           <ShowConversionMessages messages={$messages} />
-          <div>
-            The testobject (which is used to render the questions in the 'information panel' item
-            has the following tags:
-          </div>
+          <div class="flex h-full w-full flex-row justify-between overflow-y-auto">
+            <div class="literal-code h-full w-5/6 overflow-y-auto">
+              <RawEditor {state} />
+            </div>
+            <div class="h-full w-1/6">
+              <div>
+                The testobject (which is used to render the questions in the 'information panel'
+                item has the following tags:
+              </div>
 
-          <AllTagsPanel tags={state.testTags} />
+              <AllTagsPanel tags={state.testTags} />
+            </div>
+          </div>
         </div>
       </TabbedGroup>
     </div>

src/UI/Studio/EditTheme.svelte

@@ -51,7 +51,7 @@
   </div>
 
   <div class="m4 h-full overflow-y-auto">
-    {Object.keys(perRegion).join(";")}
+    <!-- {Object.keys(perRegion).join(";")} -->
     <TabbedGroup>
       <div slot="title0">Basic properties</div>
       <div slot="content0">
@@ -74,16 +74,15 @@
       </div>
 
       <div slot="title4">Configuration file</div>
-      <div slot="content4" class="h-full">
+      <div slot="content4" class="flex h-full flex-col">
         <div>
           Below, you'll find the raw configuration file in `.json`-format. This is mostly for
           debugging purposes, but you can also edit the file directly if you want.
         </div>
+        <ShowConversionMessages messages={$messages} />
         <div class="literal-code h-full w-full">
           <RawEditor {state} />
         </div>
-
-        <ShowConversionMessages messages={$messages} />
       </div>
     </TabbedGroup>
   </div>