OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-001B-launcher-fixes/BUG-004-create-page-modal-styling.md

BUG-004: "Create Page" Modal Misaligned

Severity: 🟡 Medium (UI/UX Issue)
Status: Identified
Category: CSS Styling

---

🐛 Symptom

When clicking "+ Add new page" in the Page Router property editor:

• ❌ Modal rectangle appears below the pointer triangle
• ❌ Triangle "floats" and barely touches the rectangle
• ❌ Looks unprofessional and broken

Expected: Triangle should be seamlessly attached to the modal rectangle.

Actual: Triangle and rectangle are visually disconnected.

---

🔍 Root Cause

CSS positioning issue in legacy PopupLayer system

The Modal Components

// Pages.tsx line ~195
PopupLayer.instance.showPopup({
  content: { el: $(div) },
  attachTo: $(this.popupAnchor),
  position: 'right' // ← Position hint
  // ...
});

The popup uses legacy jQuery + CSS positioning from pages.css.

Likely CSS Issue

/* packages/noodl-editor/src/editor/src/styles/propertyeditor/pages.css */

/* Triangle pointer */
.popup-layer-arrow {
  /* Positioned absolutely */
}

/* Modal rectangle */
.popup-layer-content {
  /* Also positioned absolutely */
  /* ❌ Offset calculations may be incorrect */
}

The triangle and rectangle are positioned separately, causing misalignment.

---

🛠️ Solution

Option 1: Fix CSS (Recommended)

Adjust positioning in pages.css:

.popup-layer-content {
  /* Ensure top aligns with triangle */
  margin-top: 0;
  /* Adjust offset if needed */
}

.popup-layer-arrow {
  /* Ensure connects to content */
}

Option 2: Migrate to Modern Popup

Replace legacy PopupLayer with modern PopupMenu (from @noodl-core-ui).

Complexity: Higher, but better long-term solution.

---

✅ Verification

1. Open project with Page Router
2. Click "+ Add new page" button
3. Check modal appearance
4. Triangle should seamlessly connect to rectangle

---

Priority: P2 - Fix after critical bugs
Impact: Cosmetic only, doesn't affect functionality