before working on thumb scaling

Author: jonas-eschmann

index.css

@@ -1,7 +1,10 @@
+html { font-size: 16px; }
+:root { --ui-scale: 1; }
+
 body {
     display: flex;
     flex-direction: column;
-    height: 100vh;
+    height: 100dvh;
     margin: 0;
     overflow: hidden;
 }
@@ -69,8 +72,14 @@ body {
     justify-content: center;
     align-items: center;
     gap: 10px;
-    width: 100%;
-    margin: 8px;
+    padding: 0.3rem;
+    background-color: rgb(224, 224, 224);
+}
+#controller-options-container{
+    flex-direction: row;
+}
+.controls-container-every-other{
+    background-color: rgb(215, 215, 215);
 }
 .slider-container > div{
     text-align: center;
@@ -201,13 +210,6 @@ canvas{
 }
 
 
-#controller-options-container{
-    display: flex ;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    margin: 8px;
-}
 
 #controller-selector-container{
     margin-right: 8px;

index.html

@@ -92,7 +92,7 @@
         <div id="sim-container"></div>
     </div>
     <div id="controls-box">
-        <div id="controller-options-container">
+        <div id="controller-options-container" class="controls-container controls-container-every-other">
             <div id="controller-selector-container">
                 <form id="controller-selector-form">
                     <label class="controller-selector-label" >
@@ -191,7 +191,7 @@
             <button id="pause">Pause</button>
             <button id="step">Step</button>
         </div>
-        <div id="reference-trajectory-container" class="controls-container">
+        <div id="reference-trajectory-container" class="controls-container controls-container-every-other">
             <div id="reference-trajectory-offset-container">
                 <span class="slider-container">
                     <div>