ช่วยแก้ 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 เท่านั้น

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

<div className="w-full max-w-full overflow-hidden">
  <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
    <div className="min-w-0">
      <h1>บทเรียนออนไลน์</h1>
      <p>เรียนรู้จากวิดีโอและเอกสารประกอบที่ HRD เผยแพร่ให้กับพนักงาน</p>
    </div>

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

  </div>

  <Card className="overflow-hidden">
    <div className="overflow-x-auto">
      <Table className="w-full min-w-[1050px] table-fixed">
        ...
      </Table>
    </div>
  </Card>
</div>

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

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