mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-13 15:52:56 +01:00
99 lines
2.0 KiB
Markdown
99 lines
2.0 KiB
Markdown
# 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
|
|
|
|
```typescript
|
|
// 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
|
|
|
|
```css
|
|
/* 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`:
|
|
|
|
```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
|