Update public/style.css, public/ar_main.js

public/ar_main.js

@@ -361,18 +361,18 @@ function openMoveMenu() {
       Verschiebungsgröße: <span id="move-delta-display">${moveDelta.toFixed(2)}</span>
       <input type="range" min="0.01" max="1.0" step="0.01" value="${moveDelta}" onchange="updateMoveDelta(this.value)">
     </label>
-    <div style="display: flex; gap: 4px;">
+    <div class="button-row">
         <div class="control-button" id="left" onclick="moveModelDynamic('x', -moveDelta)">
-            <img src="assets/icons/left-arrow.png" alt="Up" />
+            <img src="assets/icons/left-arrow.png" alt="Left" />
         </div>
         <div class="control-button" id="right" onclick="moveModelDynamic('x', moveDelta)">
-            <img src="assets/icons/right-arrow.png" alt="Up" />
+            <img src="assets/icons/right-arrow.png" alt="Right" />
         </div>
         <div class="control-button" id="up" onclick="moveModelDynamic('z', -moveDelta)">
             <img src="assets/icons/up-arrow.png" alt="Up" />
         </div>
         <div class="control-button" id="down" onclick="moveModelDynamic('z', moveDelta)">
-            <img src="assets/icons/down-arrow.png" alt="Up" />
+            <img src="assets/icons/down-arrow.png" alt="Down" />
         </div>
     </div>
     <button onclick="closeDynamicMenu()">Zurück</button>

public/style.css

@@ -240,15 +240,15 @@ button:active {
 
 
 /* Style für Move Menu */
-#move-menu {
+.button-row {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  gap: 4px;
   justify-content: center;
-  gap: 10px;
+  align-items: center;
 }
 
 .control-button {
+  flex: 0 0 auto;
   width: 40px;
   height: 40px;
   border: none;
@@ -261,13 +261,10 @@ button:active {
 .control-button img {
   width: 40px;
   height: 40px;
+  object-fit: contain;
 }
 
 .control-button:active {
   background-color: #0056b3;
   transform: scale(0.95);
-}
-
-#button-controls .spacer {
-  width: 40px;
-}
+}
\ No newline at end of file