travelplanning/CHAT_UI_refix.md

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:

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