commit

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

@@ -0,0 +1,71 @@
+ช่วยแก้ 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 เหมือนหน้า ประวัติการอบรม