diff --git a/src/components/GanttChart/GanttChart.vue b/src/components/GanttChart/GanttChart.vue
index 1385dbc01800f84cd9033ad325de4197f9168c13..839de801ff9293e7ddb236347689ce8135341e5b 100644
--- a/src/components/GanttChart/GanttChart.vue
+++ b/src/components/GanttChart/GanttChart.vue
@@ -301,19 +301,19 @@ function getQueueStyle(item: QueueItem) {
   const end = getTimeString(item.finishTime);
   const startDecimal = timeToDecimal(start);
   const endDecimal = timeToDecimal(end);
-  const timelineStart = timeToDecimal(startTime.value);
-  const timelineEnd = timeToDecimal(endTime.value);
+  const totalHours = hours.value.length; // นับจำนวนชั่วโมงที่แสดง
 
-  const ratioStart = Math.max(0, Math.min(1, (startDecimal - timelineStart) / (timelineEnd - timelineStart)));
-  const ratioEnd = Math.max(0, Math.min(1, (endDecimal - timelineStart) / (timelineEnd - timelineStart)));
+  // คำนวณอัตราส่วนของตำแหน่งเริ่มต้นและสิ้นสุด ตามจำนวนชั่วโมงทั้งหมด
+  const leftPercent = ((startDecimal - timeToDecimal(startTime.value)) / totalHours) * 100;
+  const widthPercent = ((endDecimal - startDecimal) / totalHours) * 100;
 
   const backgroundColor = getQueueColor(item.orderID); // ใช้ฟังก์ชันที่แก้ไขแล้ว
 
   console.log(`Queue ${item.queueID}: orderID=${item.orderID}, color=${backgroundColor}`);
 
   return {
-    left: ratioStart * 100 + '%',
-    width: (ratioEnd - ratioStart) * 100 + '%',
+    left: `${leftPercent}%`,
+    width: `${widthPercent}%`,
     backgroundColor: backgroundColor, // ใช้สีแดงพาสเทลหรือสีธีมน้ำ
     color: '#333',
     borderRadius: '10px',
@@ -330,6 +330,7 @@ function getQueueStyle(item: QueueItem) {
 
 
 
+
 function getLineStyle(hour: number) {
   const totalHours = hours.value.length; // นับจำนวนชั่วโมงที่แสดง (เช่น 10 ช่อง)
   const leftPercent = (hour - timeToDecimal(startTime.value)) / totalHours * 100;