Implemented an iPad-focused responsive styling improvement.

Changes made
Added a dedicated iPad breakpoint for 768–1180px widths.
Improved inventory card layout:
Two-column card grid on iPads.
Cleaner spacing and card sizing.
Image previews now preserve aspect ratio with object-fit: contain.
Added consistent image backgrounds and rounded borders.
Fixed first-image visibility inside video/image containers.
Improved forms:
Two-column form layout on iPad.
Larger 44px touch-friendly controls.
Better spacing for filter groups and search fields.
Improved tables:
Rounded scroll container.
Better horizontal touch scrolling.
Preserved safe-area and touch interaction behavior.

Web/static/css/styles.css

@@ -921,6 +921,42 @@ html, body {
     }
 }
 
+/* iPad layout: keep content airy while using the available tablet width. */
+@media screen and (min-width: 768px) and (max-width: 1180px) {
+    .container {
+        width: min(100% - 32px, 1120px);
+        margin: 16px auto;
+        padding: 20px;
+    }
+
+    .form-control,
+    .form-select,
+    textarea,
+    input,
+    select {
+        min-height: 44px;
+        font-size: 16px;
+    }
+
+    .btn,
+    button,
+    input[type="submit"],
+    input[type="button"] {
+        min-height: 44px;
+        touch-action: manipulation;
+    }
+
+    .table-responsive {
+        border: 1px solid var(--ui-border);
+        border-radius: var(--ui-radius);
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .table-responsive > .table {
+        margin-bottom: 0;
+    }
+}
+
 /* ========================================================= */
 /* UNIVERSAL DARK MODE OVERRIDES FOR HARDCODED HTML STYLES   */
 /* ========================================================= */

Web/templates/main_admin.html

@@ -1971,6 +1971,122 @@
         box-sizing: border-box;
         white-space: nowrap;
     }
+
+    /* iPad: use the wider canvas for cards, filters, forms, and image previews. */
+    @media screen and (min-width: 768px) and (max-width: 1180px) {
+        .admin-content-container {
+            width: min(100%, 1120px) !important;
+            max-width: 1120px !important;
+            margin: 0 auto !important;
+            padding: 20px 24px 28px !important;
+            box-sizing: border-box !important;
+        }
+
+        .filter-container {
+            display: grid !important;
+            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+            align-items: start;
+            gap: 14px !important;
+        }
+
+        .filter-group {
+            min-width: 0 !important;
+            width: auto !important;
+            padding: 14px !important;
+        }
+
+        .filter-group.search-field {
+            grid-column: span 2;
+        }
+
+        .search-container {
+            gap: 8px;
+        }
+
+        .search-container input,
+        .form-group input,
+        .form-group select,
+        .form-group textarea {
+            min-height: 44px;
+            font-size: 16px;
+        }
+
+        .items-container {
+            display: grid !important;
+            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+            gap: 18px !important;
+            padding: 14px 0 24px !important;
+            overflow: visible !important;
+            scroll-snap-type: none !important;
+        }
+
+        .item-card {
+            width: auto !important;
+            max-width: none !important;
+            min-width: 0 !important;
+            padding: 16px !important;
+            scroll-snap-align: none !important;
+        }
+
+        .item-card .image-container {
+            width: 100% !important;
+            max-width: none !important;
+            height: auto !important;
+            aspect-ratio: 4 / 3;
+            margin: 10px 0 14px !important;
+            overflow: hidden !important;
+            border: 1px solid var(--ui-border);
+            border-radius: 12px !important;
+            background: var(--ui-surface-soft);
+        }
+
+        .item-card .image-container .item-image,
+        .item-card .image-container .video-container {
+            width: 100% !important;
+            height: 100% !important;
+        }
+
+        .item-card .image-container .item-image {
+            object-fit: contain !important;
+            object-position: center;
+            background: var(--ui-surface-soft);
+        }
+
+        .item-card .image-container .item-image[data-index="0"] {
+            display: block !important;
+            position: relative !important;
+            opacity: 1 !important;
+        }
+
+        .item-card .image-container .item-image:not([data-index="0"]) {
+            display: none !important;
+        }
+
+        .item-card .image-container .video-container {
+            position: relative;
+            display: block !important;
+        }
+
+        .form-row {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 16px;
+        }
+
+        .form-actions {
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .form-actions > * {
+            min-height: 44px;
+        }
+
+        #item-modal .modal-content {
+            width: min(92vw, 880px);
+        }
+    }
+
 </style>
 <style>
     .bookmark-btn { position:absolute; top:8px; right:8px; width:46px; height:46px; background:rgba(255,255,255,.92); border:2px solid #ffc107; border-radius:50%; font-size:1.65rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#ffc107; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:background .2s, transform .15s, color .2s; z-index:6; pointer-events:auto; }