alla-tms/plans/fix-layout-online-lesson-page.md

ช่วยแก้ Layout หน้า บทเรียนออนไลน์

ปัญหา:

• ตารางล้นออกด้านขวา
• ปุ่ม "+ เพิ่มบทเรียนออนไลน์" ด้านบนขวาโดนตัด/ล้นจอ
• Column ผู้สร้างยาวเกินไป
• ไม่มี Action column หรือ Action column ถูกดันออกนอกหน้าจอ

สิ่งที่ต้องแก้:

1. ครอบ Page content ด้วย container ที่ไม่ล้นจอ เช่น max-w-full overflow-hidden
2. Header ด้านบนให้ใช้ layout แบบ responsive:
   • ซ้ายเป็น Title/Subtitle
   • ขวาเป็นปุ่มเพิ่มบทเรียน
   • ถ้าพื้นที่ไม่พอให้ปุ่มลงบรรทัดใหม่
3. ปุ่มเพิ่มบทเรียนต้องไม่ล้นจอ ใช้ shrink-0 และข้อความไม่ซ้อน
4. Table card ให้ใช้:
   • overflow-hidden
   • ด้านในใช้ overflow-x-auto
5. Table ให้ใช้:
   • w-full
   • table-fixed
   • min-w-[1050px] หรือปรับให้พอดีกับ column
6. กำหนด width ของ column ทุกช่อง เช่น:
   • รูปปก / ไฟล์: 120px
   • ชื่อบทเรียน: 320px
   • หมวดหมู่: 140px
   • ประเภทวิดีโอ: 140px
   • ไฟล์แนบ: 140px
   • สถานะ: 130px
   • วันที่เผยแพร่: 150px
   • ผู้สร้าง: 160px
   • จัดการ: 70px
7. ช่องชื่อบทเรียน รายละเอียด และผู้สร้าง ให้ใช้ truncate
8. Action column ต้องอยู่ขวาสุดและเห็นได้ ไม่โดนตัด
9. ถ้าข้อมูลเยอะ ให้ scroll เฉพาะในตาราง ไม่ใช่ทั้งหน้า
10. ห้ามแก้ API หรือ Business Logic แก้เฉพาะ Layout / className / columns เท่านั้น

ตัวอย่างโครงสร้าง:

บทเรียนออนไลน์

เรียนรู้จากวิดีโอและเอกสารประกอบที่ HRD เผยแพร่ให้กับพนักงาน

<Button className="shrink-0">
  + เพิ่มบทเรียนออนไลน์
</Button>

...

ผลลัพธ์ที่ต้องการ:

• หน้าไม่ล้นจอ
• ปุ่มเพิ่มบทเรียนแสดงครบ
• ตารางเลื่อนแนวนอนเฉพาะเมื่อจำเป็น
• Column ไม่เบียดกัน
• Action column แสดงครบ
• Layout เหมือนหน้า ประวัติการอบรม