travelplanning/NOTE_BOARD.md

To AI Agent: Fix Overlapping Text and Layout Overflow in MyNotePage Note Cards

1. Context & Layout Bug Analysis

We are fixing a severe rendering and layout bug inside the Note Card component of MyNotePage.tsx as captured in image_8a449e.png:

• Bug 1 (Chữ đè chồng lên nhau): The text lines inside the note body (headings, dates, journal contents) are collapsing vertically and rendering directly on top of each other. This is caused by rogue absolute positioning or a broken flex/grid system on inner content elements.
• Bug 2 (Tràn ra khỏi Board chứa): Long text strings (such as resolved address lines with "Đà Nẵng, Vietnam" or "Tuy Hòa, Phú Yên") are breaking out horizontally and vertically beyond the rounded border bounds of the card.
• Goal: Clean up the typography layout engine so that elements stack naturally in a vertical flow (block or flex-col), wrap text cleanly when boundaries are met, and respect the container's height/scroll rules.

---

2. Refactoring Instructions

Step 1: Clean Up the Note Content Wrapper Class

Locate the container rendering the inner markdown text inside the note board card. Force it to follow a regular vertical block layout flow and ensure text wrapping is active.

{/* ❌ OLD COLLAPSED CONTAINER (Dự đoán đang bị sai class) */}
<div className="absolute ..."> or <div className="h-full ...">

{/* ✅ NEW FIXED CONTAINER STRUCTURE */}
<div className="flex flex-col gap-3 w-full text-left overflow-y-auto max-h-[250px] pr-2 scrollbar-thin">
  {/* Ensure markdown rendering outputs elements as block-level */}
  <div className="prose prose-sm dark:prose-invert max-w-none break-words whitespace-pre-wrap text-yotripDark-text-primary">
    {/* Inside here, headings (##, ####) and lists (-) must stack naturally */}
    {note.content}
  </div>
</div>

### Step 2: Fix Inner Line Items Styles (If parsing strings manually)
If you are split-parsing the lines manually (e.g., parsing 📅 and 📍 into individual rows), ensure NO element inside uses absolute. Every line item must be relative or static.

/* Inject these explicit fixes into index.css under @layer components if needed */
.note-content-line {
  position: relative !important;   /* Force breakout from any absolute parent trap */
  display: block !important;       /* Clear any inline overlap */
  width: 100% !important;
  word-break: break-word !important; /* Force text to wrap instead of bleeding out */
  white-space: normal !important;  /* Overwrite any nowrap rule */
  margin-bottom: 8px;
}

## 3. Full Component JSX Layout Optimization Blueprint
Update the single Note Card render template inside MyNotePage.tsx to match this stable layout standard:

export const NoteCard = ({ note }) => {
  return (
    <div className="relative w-full bg-yotripDark-surface border border-yotripDark-border rounded-2xl p-5 shadow-md hover:shadow-lg transition-all flex flex-col gap-4">
      
      {/* 1. Header Zone (Title & Date) */}
      <div className="flex flex-col gap-1 border-b border-yotripDark-border pb-3">
        <h3 className="text-lg font-bold text-white break-words pr-8">
          {note.title}
        </h3>
        <span className="text-xs text-yotripDark-muted flex items-center gap-1.5">
          <Calendar className="w-3.5 h-3.5" />
          {note.date}
        </span>
      </div>

      {/* 2. Content Zone - FIXES THE BUG IN IMAGE */}
      <div className="w-full flex flex-col gap-3 overflow-y-auto max-h-[280px] text-sm text-slate-200 pr-1">
        {/* Dynamic content rendering with forced layout safety rails */}
        <div className="space-y-3 break-words whitespace-pre-wrap text-left select-text">
          {/* Ensure raw strings or processed lines flow down smoothly */}
          {note.content.split('\n').map((line, index) => {
            if (line.trim() === '') return null;
            return (
              <p key={index} className="leading-relaxed text-slate-200 block w-full m-0 p-0">
                {line}
              </p>
            );
          })}
        </div>
      </div>

    </div>
  );
};

## 4. Verification Checklist for AI Agent
[ ] No Overlap: Verify that the "## Ghi chú chung...", "Ghi chú: Xuất phát", and "📅 Thời gian tùy hứng" text elements sit on unique vertical lines. They must never occupy the same space.

[ ] Horizontal Bound Test: Long addresses (e.g., Apec mandala Victor condotel, Hùng Vương, Phường Tuy Hòa...) must trigger a soft wrap onto line 2 and line 3 instead of punching through the card's right border.

[ ] Scroll Containment: If the text length exceeds the card's designated size, it must elegantly clip inside and provide a clean vertical scrollbar, rather than dripping out underneath the board container.