From b5946b9da3b5fef87f7adde2d4f0a2cf677b97e3 Mon Sep 17 00:00:00 2001
From: Yared Yemane <yaredyemane1@gmail.com>
Date: Thu, 16 Apr 2026 04:44:32 -0700
Subject: [PATCH] Fix stale edit-lesson form after save

Made-with: Cursor
---
 src/api/courses.api.ts                            | 15 +++++++++++++--
 .../content-management/HumanLanguagePage.tsx      | 10 +++++-----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/api/courses.api.ts b/src/api/courses.api.ts
index 58fa444..9c77a29 100644
--- a/src/api/courses.api.ts
+++ b/src/api/courses.api.ts
@@ -299,8 +299,19 @@ export const deleteSubModule = (subModuleId: number) =>
 export const getVideosBySubModule = (subModuleId: number) =>
   http.get<GetSubCourseVideosResponse>(`/course-management/sub-modules/${subModuleId}/videos`)
 
-export const getSubModuleLessonById = (lessonId: number) =>
-  http.get<GetSubModuleLessonDetailResponse>(`/course-management/sub-module-lessons/${lessonId}`)
+export const getSubModuleLessonById = (
+  lessonId: number,
+  options?: {
+    /**
+     * Cache-bust the request to avoid serving stale lesson data after edits.
+     * This is intentionally implemented via query string to work with default axios config.
+     */
+    cacheBust?: boolean
+  },
+) =>
+  http.get<GetSubModuleLessonDetailResponse>(`/course-management/sub-module-lessons/${lessonId}`, {
+    params: options?.cacheBust ? { _t: Date.now() } : undefined,
+  })
 
 export const createSubCourseVideo = (data: CreateSubCourseVideoRequest) =>
   http.post("/course-management/sub-module-videos", {
diff --git a/src/pages/content-management/HumanLanguagePage.tsx b/src/pages/content-management/HumanLanguagePage.tsx
index 3b8da01..57bb6b6 100644
--- a/src/pages/content-management/HumanLanguagePage.tsx
+++ b/src/pages/content-management/HumanLanguagePage.tsx
@@ -944,7 +944,7 @@ export function HumanLanguagePage() {
     })
     if (skipFetch) return
     try {
-      const res = await withTimeout(getSubModuleLessonById(lessonId), 12000)
+      const res = await withTimeout(getSubModuleLessonById(lessonId, { cacheBust: forceRefresh }), 12000)
       const data = res.data?.data
       if (!data) throw new Error("Missing lesson detail payload")
       setLessonDetailState((prev) => ({
@@ -1022,7 +1022,7 @@ export function HumanLanguagePage() {
     setLessonDialog({ open: true, lessonId: lesson.id, questionSetId: lesson.question_set_id })
     setSavingLesson(false)
     try {
-      const detail = (await getSubModuleLessonById(lesson.id)).data?.data
+      const detail = (await getSubModuleLessonById(lesson.id, { cacheBust: true })).data?.data
       setLessonForm({
         title: detail?.title ?? lesson.title ?? "",
         description: detail?.description ?? "",
@@ -2704,7 +2704,7 @@ export function HumanLanguagePage() {
           if (!open) setLessonDialog({ open: false })
         }}
       >
-        <DialogContent className="sm:max-w-lg">
+        <DialogContent className="sm:max-w-5xl max-h-[calc(100vh-6rem)] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>Edit lesson</DialogTitle>
             <DialogDescription>Update lesson metadata stored in the linked question set.</DialogDescription>
@@ -2800,7 +2800,7 @@ export function HumanLanguagePage() {
                         </div>
                       </div>
 
-                      <div className="p-4">
+                          <div className="p-4">
                         {lessonFetch?.status !== "ok" ? (
                           <div className="flex flex-col items-center justify-center gap-2 py-12 text-sm text-grayScale-500">
                             <SpinnerIcon className="h-5 w-5 text-brand-500" alt="" />
@@ -2815,7 +2815,7 @@ export function HumanLanguagePage() {
                             </p>
                           </div>
                         ) : (
-                          <ul className="max-h-[min(28rem,calc(100vh-16rem))] space-y-3 overflow-y-auto pr-1 [scrollbar-gutter:stable]">
+                          <ul className="space-y-3 pr-1 [scrollbar-gutter:stable]">
                             {lessonFetch.questions.map((q, qIdx) => {
                               const qType = String(q.question_type ?? "—")
                               const embeddedUrls = extractUrls(q.question_text || "")