refactor time-slot layout in detail-foto view for improved responsiveness and readability

public/css/user/main.css

@@ -1195,18 +1195,36 @@ .date-item.disabled {
 }
 
 
-/* --- BAGIAN KANAN: JAM --- */
 .time-slot-container {
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-rows: repeat(3, auto);
-    gap: 8px;
+    grid-auto-flow: column;
-    max-height: 280px;
+    gap: 10px 8px;
-    overflow-y: auto;
+    overflow-x: auto;
-    padding-right: 5px;
+    padding-bottom: 12px;
+    -webkit-overflow-scrolling: touch;
+}
+
+@media (min-width: 768px) {
+    .time-slot-container {
+        display: flex;
+        flex-direction: column;
+        grid-template-rows: none;
+        grid-auto-flow: row;
+        max-height: 350px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding-bottom: 0;
+    }
+
+    .btn-time {
+        width: 100%;
+    }
 }
 
 .time-slot-container::-webkit-scrollbar {
     width: 3px;
+    height: 3px;
 }
 
 .time-slot-container::-webkit-scrollbar-thumb {
@@ -1215,6 +1233,7 @@ .time-slot-container::-webkit-scrollbar-thumb {
 }
 
 .btn-time {
+    flex: 0 0 auto;
     width: 90px;
     padding: 8px 4px;
     font-size: var(--body-font);

resources/views/user/detail-foto.blade.php

@@ -97,15 +97,12 @@ class="detailfoto-thumb rounded-4">
 
                                 <div class="col-md-3">
                                     <h6 class="mb-3 small">Jam Tersedia</h6>
-                                    <div class="time-slot-container row g-2">
+                                    <div class="time-slot-container">
                                         @for ($hour = 9; $hour <= 20; $hour++)
-                                            {{-- Slot Jam Genap (contoh: 09:00) --}}
                                             <button type="button" class="btn-time"
                                                 data-time="{{ sprintf('%02d:00', $hour) }}">
                                                 {{ sprintf('%02d:00', $hour) }} WIB
                                             </button>
-
-                                            {{-- Slot Jam Setengah (contoh: 09:30) --}}
                                             <button type="button" class="btn-time"
                                                 data-time="{{ sprintf('%02d:30', $hour) }}">
                                                 {{ sprintf('%02d:30', $hour) }} WIB