Changes to the Button style for non mobile devices to have a smohter

Web/templates/main_admin.html

@@ -562,20 +562,20 @@
        align-items: center;
     }
    
-    .navigation-buttons {
-        display: contents;
-    }
-
     .items-navigation {
         display: grid;
-        grid-template-columns: auto minmax(0, 1fr) auto;
+        grid-template-columns: 44px minmax(0, 1fr) 44px;
         align-items: center;
-        gap: 10px;
+        column-gap: 18px;
         margin-top: 20px;
     }
 
-    .navigation-buttons .prev-button,
-    .navigation-buttons .next-button {
+    .navigation-button-slot {
+        display: flex;
+        justify-content: center;
+    }
+
+    .navigation-button {
         background-color: #007bff;
         color: #fff;
         border: none;
@@ -585,8 +585,7 @@
         z-index: 1;
     }
 
-    .navigation-buttons .prev-button:hover,
-    .navigation-buttons .next-button:hover {
+    .navigation-button:hover {
         background-color: #0056b3;
     }
 
@@ -1643,7 +1642,7 @@
             display: block !important;
         }
 
-        .navigation-buttons {
+        .navigation-button-slot {
             display: none !important; /* Hide horizontal navigation on mobile */
         }
         
@@ -1956,7 +1955,7 @@
     /* Standardized button styles across the application */
     .search-button, .scan-button, .filter-toggle, .clear-filter, 
     .add-new-btn, .popup-close-button, .prev-image-button, .next-image-button,
-    .navigation-buttons .prev-button, .navigation-buttons .next-button {
+    .navigation-button {
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -2554,13 +2553,15 @@ document.addEventListener('DOMContentLoaded', ()=>{
         </div>
 
         <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 class="navigation-button-slot">
+                <button class="navigation-button prev-button" type="button" onclick="scrollPrev()" aria-label="Vorherige Elemente">&#10094;</button>
             </div>
             <div id="items-container" class="items-container">
                 <!-- Items will be dynamically loaded here -->
             </div>
+            <div class="navigation-button-slot">
+                <button class="navigation-button next-button" type="button" onclick="scrollNext()" aria-label="Nächste Elemente">&#10095;</button>
+            </div>
         </div>
     </div>
     <div id="item-modal" class="item-modal">