From 6ce77c4f20a50aa0d25d4c8b49ccd6c08bb200ef Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Fri, 31 Jul 2026 06:16:36 +0700
Subject: [PATCH] fix(generator): anchor preview bottom to modal edge

---
 md/49_AI_PROMPT_GENERATOR.md | 6 +++---
 wiki.md                      | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/md/49_AI_PROMPT_GENERATOR.md b/md/49_AI_PROMPT_GENERATOR.md
index 537f59e..84d85a0 100644
--- a/md/49_AI_PROMPT_GENERATOR.md
+++ b/md/49_AI_PROMPT_GENERATOR.md
@@ -176,7 +176,7 @@
     <div class="col-span-5 bg-slate-900 flex flex-col overflow-hidden relative">
       
       <!-- Preview Header -->
-      <div class="h-10 bg-slate-950 border-b border-slate-800 px-4 flex items-center justify-between text-xs font-mono">
+      <div class="h-10 shrink-0 bg-slate-950 border-b border-slate-800 px-4 flex items-center justify-between text-xs font-mono">
         <span class="text-slate-300 font-bold flex items-center gap-2">
           <i class="fa-solid fa-code text-cyan-400"></i> LIVE PROMPT PREVIEW
         </span>
@@ -191,8 +191,8 @@
       </div>
 
       <!-- Live Generated Text Output Box -->
-      <div class="flex-1 p-4 overflow-y-auto custom-scrollbar">
-        <div id="promptOutputText" class="w-full h-full bg-slate-950 border border-slate-800 rounded-xl p-4 font-mono text-xs text-slate-200 leading-relaxed whitespace-pre-wrap select-text selection:bg-cyan-900 selection:text-white">
+      <div class="flex-1 flex flex-col min-h-0 p-4">
+        <div id="promptOutputText" class="w-full flex-1 bg-slate-950 border border-slate-800 rounded-xl p-4 font-mono text-xs text-slate-200 leading-relaxed whitespace-pre-wrap select-text selection:bg-cyan-900 selection:text-white overflow-y-auto custom-scrollbar">
           <!-- Text generated dynamically -->
         </div>
       </div>
diff --git a/wiki.md b/wiki.md
index 1e48b0d..fc5305e 100644
--- a/wiki.md
+++ b/wiki.md
@@ -907,3 +907,9 @@
 - **Tóm tắt thay đổi:** (1) Phần DANH MỤC trong form tạo preset đổi từ input text sang dropdown `<select>` có đầy đủ danh mục từ presets + danh mục đã lưu trong localStorage, cho phép người dùng chọn danh mục có sẵn hoặc nhấn "+ Nhập danh mục mới..." để thêm; danh mục mới được lưu vào `midi_prompt_categories` trong localStorage để load lần sau. (2) Nút "Tạo preset với cấu trúc" mở modal mới chứa iframe `/ai-prompt-generator` phục vụ nội dung HTML từ `md/49_AI_PROMPT_GENERATOR.md`, cho phép người dùng dùng giao diện đầy đủ để tạo preset; đóng modal sẽ tự động refresh danh sách preset từ localStorage.
 - **Các file ảnh hưởng:** `app/main.py`, `app/static/js/app.jsx`, `app/static/js/app.precompiled.js`
 - **Ghi chú/Test (nếu có):** `npm run build` pass. Backend route `/ai-prompt-generator` trả về HTML từ `md/49_AI_PROMPT_GENERATOR.md`. Test: mở AI Preset Manager → Tạo mới → dropdown DANH MỤC hiện danh sách → thêm danh mục mới → lưu → reload modal vẫn giữ danh mục mới. Click "Tạo preset với cấu trúc" → mở iframe generator.
+
+---
+### [2026-07-31 06:15] Task: Fix preview layout in AI Prompt Generator modal
+- **Tóm tắt thay đổi:** Sửa layout right column của generator page: header thêm `shrink-0` để không bị co lại; container preview đổi thành `flex-1 flex flex-col min-h-0` thay vì `overflow-y-auto`; `#promptOutputText` đổi từ `h-full` sang `flex-1` + `overflow-y-auto` để bottom luôn neo với cạnh modal và nội dung scroll trong element.
+- **Các file ảnh hưởng:** `md/49_AI_PROMPT_GENERATOR.md`
+- **Ghi chú/Test (nếu có):** Refresh trang generator → right column fill full height → content scroll bên trong #promptOutputText.