Threshold (ขีดจำกัด) ในการขยายตัวนั้นสูงเกินไป ทำให้ข้อความเริ่มถูกซ่อน (Truncation) ก่อนที่โค้ดจะตัดสินใจว่าถึงเวลาต้องขยาย

ปัญหานี้เกิดจากความไม่ลงตัวระหว่าง:

1. ความกว้างเริ่มต้น (150px) ที่กำหนดใน CSS
2. ความกว้างที่คำนวณได้ จาก getTextWidth (รวม Padding 30px)
3. เงื่อนไขการขยาย (if (finalWidth > 150))

เมื่อความยาวข้อความอยู่ที่ 10-13 ตัวอักษร แม้ว่าข้อความจะล้นกล่อง 150px ไปแล้วเล็กน้อย แต่ความกว้างที่คำนวณได้อาจยังไม่เกิน 150px ทำให้การขยายไม่ทำงาน

🛠️ วิธีแก้ไข Threshold การขยายตัว

เราจะแก้ไขที่โค้ด JavaScript เพียงจุดเดียว โดยการลดขีดจำกัดการเปรียบเทียบจาก 150 ลงเป็นค่าที่ต่ำกว่า (เช่น 140) เพื่อให้การขยายตัวเกิดขึ้นเร็วขึ้นและป้องกันข้อความถูกซ่อน

ตำแหน่ง:

ในส่วน JavaScript ภายในฟังก์ชัน handleExpand(e)

โค้ดที่ต้องแก้ไข:

1. นำค่าคงที่ initialWidth = 150 ออก

2. เปลี่ยนเงื่อนไขการเปรียบเทียบเป็น EXPANSION_THRESHOLD

JavaScript

/* ======================= HOVER EXPAND FUNCTION (ส่วนที่แก้ไข) ======================== */
// ... (ฟังก์ชัน getTextWidth ยังคงเดิม) ...

// 2. Main handler function
function handleExpand(e) {
    // ตรวจสอบเฉพาะ input ที่มีคลาส expandable-input เท่านั้น
    if (e.target.classList.contains('expandable-input')) {
        const input = e.target;
        const text = input.value;
        
        // ⭐️ แก้ไข: กำหนดขีดจำกัดใหม่ (ต่ำกว่า 150px) 
        // ทำให้การขยายเกิดขึ้นเร็วขึ้น เมื่อข้อความเริ่มใกล้จะล้น
        const EXPANSION_THRESHOLD = 140; 
        const MAX_WIDTH = 500; 

        if (e.type === 'mouseover') {
            if (text.length === 0) return; 

            const computedStyle = window.getComputedStyle(input);
            const font = `${computedStyle.fontSize} ${computedStyle.fontFamily}`;
            
            const requiredWidth = getTextWidth(text, font);
            const finalWidth = Math.min(requiredWidth, MAX_WIDTH);
            
            // ⭐️ เงื่อนไขการขยาย: 
            // ขยายเมื่อความกว้างที่ต้องการมากกว่า EXPANSION_THRESHOLD (140px)
            if (finalWidth > EXPANSION_THRESHOLD) { 
                input.style.width = finalWidth + 'px';
            }
            
        } else if (e.type === 'mouseout') {
            // หดกลับไปใช้ความกว้างที่กำหนดใน CSS (150px)
            input.style.width = ''; 
        }
    }
}

// ... (Event Listeners ยังคงเดิม) ...

คำอธิบาย: การเปลี่ยนเงื่อนไขเป็น if (finalWidth > 140) หมายความว่า หากข้อความนั้นมีความยาวถึงจุดที่ระบบคำนวณว่าต้องใช้พื้นที่เกิน 140px (ซึ่งเกิดขึ้นที่ประมาณ 10-12 ตัวอักษร) มันจะเริ่มขยายทันที ทำให้ข้อความไม่ถูกซ่อนเมื่อความยาวเพิ่มขึ้น

💡 ประเด็นเกี่ยวกับ width: 150px; ใน CSS

สำหรับประเด็นที่คุณลองนำบรรทัด width: 150px; ออกจาก CSS แล้วพบว่าความกว้างยังเท่าเดิมในสถานะปกติ:

CSS

/* สไตล์สำหรับช่อง input ที่ต้องการให้ขยายเมื่อโฮเวอร์ */
.form-control.expandable-input {
    /* width: 150px; <--- ถ้าเอาบรรทัดนี้ออก */
    transition: width 0.3s ease;
    min-width: 50px;
    position: relative;
}

ในทางเทคนิค:

1. ถ้าเอาออก: ตัว Input จะกลับไปใช้ความกว้างที่ถูกกำหนดโดยคุณสมบัติของตาราง (<table>) และคลาส form-control ของ Bootstrap ซึ่งอาจจะยังให้ความกว้างที่ดูเหมือน 150px (หรืออาจจะน้อยกว่า) อยู่
2. ถ้ามีอยู่: การมี width: 150px; เป็นการ “ล็อค” ความกว้างเริ่มต้นให้เป็น 150px อย่างชัดเจน ซึ่งสำคัญมากในการใช้เงื่อนไข position: relative เพื่อให้ Input สามารถลอยตัวได้อย่างถูกต้องเมื่อมีการขยายโดย JavaScript

คำแนะนำ: ควรคงบรรทัด width: 150px; ไว้ใน CSS เพื่อให้แน่ใจว่า:

1. ความกว้างเริ่มต้นคงที่ (ไม่ยุบตัวเมื่อข้อมูลในช่องอื่นยาวขึ้น)
2. โค้ด JavaScript ทำงานได้อย่างสอดคล้องกับค่าเริ่มต้นที่ตั้งไว้

หากคุณลองนำโค้ด JavaScript ที่แก้ไขไปใช้แล้วได้ผลดี ผมยินดีที่จะบันทึกการแก้ไขนี้ลงในไฟล์ 522.html ของคุณครับ