fix: lỗi hiển thị trong itineraryTimeline

2026-06-23 11:40:41 +07:00
parent a65be48d36
commit 6b15e7ff02
17 changed files with 625 additions and 135 deletions
@@ -0,0 +1,102 @@
+# To AI Agent: Complete Component Relocation - Move Navigation Tabs to Top Header and Fix Button Text Wrapping
+
+## 1. Context & Structural Defects Analysis
+We are fixing a persistent UI layout failure on the mobile view (`yotrip.labz.io.vn`) as highlighted in the annotated screenshot `image_c61225.png`:
+
+- **Component Misplacement (Lower Red Box):** The sub-navigation tabs (`Lộ trình`, `Chi phí`, `Ảnh`, `Trò chuyện`...) are currently detached and floating erratically in the middle of the chat history viewport, overlapping message bubbles.
+- **Empty Empty Top Gap (Upper Red Box):** There is an empty dark/blank bar container sitting directly below the Main Tour Title Header ("Hoa vàng cỏ xanh 20...").
+- **Text Wrapping Bug:** The labels on the floating navigation items are wrapping onto multiple lines (e.g., `Lộ\ntrình`, `Chi\nphí`), ruining the horizontal tab presentation.
+
+---
+
+## 2. Refactoring Objectives
+1. **DOM Relocation:** Completely extract the Sub-Navigation Tabs out of the chat message block. Relocate and mount it directly into the upper red box zone so it sits flush immediately underneath the Main Tour Header.
+2. **Text & Width Optimization:** Enforce strict styles on the tab container so that all navigation buttons adjust dynamically to fit within the viewport width. The button text names **MUST NOT** wrap down to a new line (`white-space: nowrap`).
+
+---
+
+## 3. Targeted Fix Instructions
+
+### Step 1: Correct the DOM / React Component Tree Hierarchy
+Ensure the navigation component sits inside the sticky top layout zone, completely separated from the scrollable chat list container:
+
+```html
+<div class="chat-viewport-wrapper">
+  
+  <div class="fixed-top-header-block">
+    <header class="main-tour-header">
+      </header>
+
+    <nav class="sub-navigation-tabs">
+      <button class="nav-tab-item">Lộ trình</button>
+      <button class="nav-tab-item">Chi phí</button>
+      <button class="nav-tab-item">Ảnh</button>
+      <button class="nav-tab-item active">Trò chuyện</button>
+      <button class="nav-tab-item">Thành viên</button>
+      <button class="nav-tab-item">Cài đặt</button>
+    </nav>
+  </div>
+
+  <main class="chat-messages-scroll-area">
+    </main>
+
+</div>
+
+### Step 2: Apply CSS/Tailwind Rules for Button Shrinkage & Single-Line Restraints
+Apply these structural adjustments to make sure the tabs fill the screen width evenly without line breaks:
+
+/* Container for header components stacked on top */
+.fixed-top-header-block {
+  display: flex !important;
+  flex-direction: column !important;
+  width: 100% !important;
+  position: sticky !important;
+  top: 0 !important;
+  z-index: 50 !important;
+  background-color: #ffffff;
+}
+
+/* FIX: Ensure tabs fit inside the viewport layout cleanly */
+.sub-navigation-tabs {
+  display: flex !important;
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 4px 8px !important; /* Tight padding to utilize screen real estate */
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  border-bottom: 1px solid #e5e7eb;
+  background-color: #ffffff;
+  
+  /* Distribute items evenly across the width */
+  justify-content: space-between !important; 
+  align-items: center !important;
+}
+
+/* FIX: Absolute enforcement of no word-wrapping on buttons */
+.nav-tab-item {
+  display: flex !important;
+  flex-direction: column !important; /* Stack icon and text if applicable */
+  align-items: center !important;
+  justify-content: center !important;
+  flex: 1 1 0% !important;         /* Allow dynamic even shrinkage */
+  min-width: 0 !important;          /* Overcomes default flex minimums */
+  
+  /* Text layout fixes */
+  white-space: nowrap !important;   /* PREVENT TEXT FROM WRAPPING TO NEW LINE */
+  font-size: 11px !important;       /* Scaled down to prevent out-of-bounds clipping */
+  padding: 4px 2px !important;
+  text-align: center !important;
+}
+
+/* Handle icon sizes inside tabs if applicable */
+.nav-tab-item svg, .nav-tab-item i {
+  font-size: 16px !important;
+  margin-bottom: 2px !important;
+}
+
+## 4. Verification Check for AI Agent
+[ ] Verify that the navigation row is no longer hovering over the chat text bubble flow.
+
+[ ] Confirm there is zero dead space or black margin layers between the tour header and the navigation buttons.
+
+[ ] Inspect text elements for words like "Lộ trình" and "Chi phí"—they must read completely on a single line horizontally.