feat<tel/mc> wrap the squares and iframe in a div container

I tested it on my android phone, and the iframe was overlapping the horizontal bar. I had to limit it to a container and manipulate it inside this container. Will test later on iphone 14 pro

teleop/htm/static/CSS/mobileController.css

@@ -4,7 +4,6 @@
   justify-content: flex-start;
   align-items: center;
   align-content: space-between;
-  gap: 1%;
   width: 100%;
   height: 100%;
 }
@@ -64,24 +63,32 @@
   color: #451c58;
   text-transform: uppercase;
 }
+#mobile_controller_container #main_view{
+  display: flex;
+  flex-direction: column;
+  gap: 1%;
+  width: 100%;
+  height: 100%;
+
+}
 
 .square {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
-  width: 90vw;
+  width: 100%;
   max-width: 1000px;
   /*It is proportional with the height of header*/
-  height: 42vh;
+  height: 50%;
   border: 0.5rem solid;
   border-color: #f6f6f6;
   border-radius: 1rem;
 }
 
 #backward_square.maneuver_square {
-  width: 100vw;
+  width: 100%;
   background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 16px, #ccc 18px, #ccc 11px);
   border: 0;
 }
@@ -175,9 +182,11 @@ canvas#following_imageCanvas.map_view {
 }
 
 #map_frame {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
   display: none;
-  position: fixed;
-  height: 85%;
-  bottom: 0;
-  width: 100vw;
+  border: none;
 }

teleop/htm/templates/mobile_controller_ui.html

@@ -13,24 +13,27 @@
 		</div>
 		<div class="right_section">
 			<button class="current_mode_button">START FOLLOWING</button>
-      <!-- The text inside `current mode button` is just a place holder. It will change with each mode -->
+			<!-- The text inside `current mode button` is just a place holder. It will change with each mode -->
 			<p class="current_mode_state"></p>
 		</div>
 	</div>
 
-	<div id="forward_square" class="square">
-		<canvas class="trail_canvas"></canvas>
-		<div class="square_text">forward</div>
-		<span class="stop_text">drag your finger to this area to force the robot to stop</span>
-		<div class="control_symbol">+</div>
-	</div>
+	<div id="main_view">
+		<iframe id="map_frame"></iframe>
+
+		<div id="forward_square" class="square">
+			<canvas class="trail_canvas"></canvas>
+			<div class="square_text">forward</div>
+			<span class="stop_text">drag your finger to this area to force the robot to stop</span>
+			<div class="control_symbol">+</div>
+		</div>
 
-	<div id="backward_square" class="square">
-		<canvas class="trail_canvas"></canvas>
-		<div class="square_text">backward</div>
-		<span class="stop_text">drag your finger to this area to force the robot to stop</span>
-		<div class="control_symbol">-</div>
+		<div id="backward_square" class="square">
+			<canvas class="trail_canvas"></canvas>
+			<div class="square_text">backward</div>
+			<span class="stop_text">drag your finger to this area to force the robot to stop</span>
+			<div class="control_symbol">-</div>
+		</div>
+		<canvas id="following_imageCanvas"></canvas>
 	</div>
-	<canvas id="following_imageCanvas"></canvas>
-	<iframe id="map_frame"></iframe>
 </div>