changes to the design

Web/templates/main_admin.html

@@ -563,8 +563,13 @@
     }
    
     .navigation-buttons {
-        display: flex;
-        justify-content: center;
+        display: contents;
+    }
+
+    .items-navigation {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        align-items: center;
         gap: 10px;
         margin-top: 20px;
     }
@@ -577,6 +582,7 @@
         cursor: pointer;
         padding: 10px;
         border-radius: 5px;
+        z-index: 1;
     }
 
     .navigation-buttons .prev-button:hover,
@@ -1633,6 +1639,10 @@
         }
         
         /* Navigation buttons mobile */
+        .items-navigation {
+            display: block !important;
+        }
+
         .navigation-buttons {
             display: none !important; /* Hide horizontal navigation on mobile */
         }
@@ -2543,12 +2553,14 @@ document.addEventListener('DOMContentLoaded', ()=>{
             <span>Anzahl</span>
         </div>
 
-        <div id="items-container" class="items-container">
-            <!-- Items will be dynamically loaded here -->
-        </div>
-        <div class="navigation-buttons">
-            <button class="prev-button" onclick="scrollPrev()">&#10094;</button>
-            <button class="next-button" onclick="scrollNext()">&#10095;</button>
+        <div class="items-navigation">
+            <div class="navigation-buttons">
+                <button class="prev-button" type="button" onclick="scrollPrev()" aria-label="Vorherige Elemente">&#10094;</button>
+                <button class="next-button" type="button" onclick="scrollNext()" aria-label="Nächste Elemente">&#10095;</button>
+            </div>
+            <div id="items-container" class="items-container">
+                <!-- Items will be dynamically loaded here -->
+            </div>
         </div>
     </div>
     <div id="item-modal" class="item-modal">