Make EmployeeCard responsive and prevent default drag behavior on images

src/components/EmployeeSector.vue

@@ -4,7 +4,8 @@
         <div class="employee-list">
             <div v-for="employee in employees" :key="employee.id" class="employee-card" draggable="true"
                 @dragstart="onDragStart($event, employee)">
-                <img :src="employee.image || defaultImage" alt="employee" class="employee-image" />
+                <!-- ✅ ปิด Drag Default ของรูปภาพ -->
+                <img :src="employee.image || defaultImage" alt="employee" class="employee-image" @dragstart.prevent />
                 <span>{{ employee.name }}</span>
             </div>
         </div>
@@ -44,17 +45,17 @@ const onDragStart = (event: DragEvent, employee: Employee) => {
     text-align: center;
 }
 
-/* ✅ ใช้ Grid ให้มี 5 คอลัมน์ */
+/* ✅ ปรับ Employee Card ให้เป็น Responsive */
 .employee-list {
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    /* 5 คนต่อแถว */
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    /* ปรับจำนวนคอลัมน์อัตโนมัติ */
     gap: 10px;
     justify-items: center;
     padding: 10px;
 }
 
-/* ✅ ปรับ Employee Card ให้พอดีกับ Grid */
+/* ✅ ปรับขนาด Employee Card ตามหน้าจอ */
 .employee-card {
     display: flex;
     flex-direction: column;
@@ -69,6 +70,24 @@ const onDragStart = (event: DragEvent, employee: Employee) => {
     transition: all 0.3s ease;
 }
 
+/* ✅ Responsive: ถ้าหน้าจอเล็กกว่า 600px */
+@media (max-width: 600px) {
+    .employee-list {
+        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+        /* ลดขนาด */
+    }
+
+    .employee-card {
+        width: 80px;
+        height: 100px;
+    }
+
+    .employee-image {
+        width: 40px;
+        height: 40px;
+    }
+}
+
 .employee-card:hover {
     background: #f0f0f0;
 }