# 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.