fix: Position error messages relative to editor instead of viewport

[jjroelofs]

Summary

Fixes error message positioning to appear relative to the editor container instead of being fixed to the viewport. This addresses the remaining positioning issues from #62 and #132.

Problem

While z-index issues were previously resolved, error messages still appeared at a fixed position (top: 0, right: 10px) relative to the viewport. This caused poor UX:

• Errors appeared far from the editor on long pages
• Multiple editors made it unclear which editor had the error
• The code retrieved editorRect but never used it for positioning

Changes

CSS (theme/style.css)

• Changed from position: fixed to position: absolute for editor-relative positioning
• Removed hardcoded top: 0 and right: 10px
• Added max-width: 400px for better readability on wide screens
• Improved padding and added box shadow for better visibility
• Added pointer-events: none to prevent interaction interference

TypeScript (src/aiagentui.ts)

• addGptErrorToolTip(): Now appends tooltip to editor container instead of document.body
• showGptErrorToolTip(): Calculates and applies position based on editor bounds
• hideGptErrorToolTip(): Updated to find tooltip within editor container
• Ensures parent container has position: relative for proper absolute positioning

Testing Instructions

Setup

1. Checkout this branch: git checkout fix/error-message-positioning
2. Install dependencies: yarn install
3. Build the project: yarn build:dist
4. Start the dev server: yarn start

Test Case 1: Error Position with Single Editor

Objective: Verify error appears at top-right of editor

1. Open the sample page with CKEditor
2. Configure with an invalid API key
3. Trigger an AI action (e.g., type /write test and press Enter)
4. Expected: Error message appears at the top-right corner of the editor (not the viewport)
5. Verify: Error is positioned ~10px from the top and right edges of the editor

Test Case 2: Multiple Editors

Objective: Verify error appears on the correct editor

1. Create a page with two CKEditor instances (top and bottom of page)
2. Configure with invalid API key
3. Trigger an AI action in the bottom editor
4. Expected: Error appears near the bottom editor, not at the top of the page
5. Scroll if needed to verify error moves with the editor container

Test Case 3: Long Page / Scrolled Editor

Objective: Verify error is visible even when editor is scrolled

1. Create a long page (add content above the editor so it's below the fold)
2. Scroll down so the editor is visible in the middle/bottom of viewport
3. Trigger an error (invalid API key + AI action)
4. Expected: Error appears at top-right of editor, visible without scrolling up
5. Old behavior: Error would appear at viewport top (invisible without scrolling)

Test Case 4: Editor in Modal/Dialog

Objective: Verify error positioning in constrained spaces

1. Open CKEditor inside a modal or sidebar (common in Drupal admin)
2. Trigger an error
3. Expected: Error appears within the modal/sidebar, positioned relative to the editor
4. Verify: Error respects the modal boundaries and doesn't overflow

Test Case 5: Error Message Duration

Objective: Verify error auto-dismisses correctly

1. Trigger an error
2. Expected: Error fades in with opacity animation
3. Wait 5 seconds (default showErrorDuration)
4. Expected: Error fades out and is hidden
5. Verify: No console errors during show/hide

Test Case 6: Error Message Content

Objective: Verify error text wraps properly

1. Trigger an error with a long message (e.g., invalid API key with full OpenAI error)
2. Expected: Text wraps within max-width: 400px
3. Verify: Message is readable and doesn't overflow the editor

Visual Inspection Checklist

• Error appears at top-right of editor (not viewport)
• Error has proper spacing (~10px from edges)
• Error has subtle shadow for depth
• Error fades in/out smoothly (1s transition)
• Error text is readable (white text on red background)
• Error doesn't interfere with clicking editor content
• Error respects max-width: 400px and wraps long text
• Error z-index (9999) keeps it above other editor UI

Regression Testing

Verify these existing features still work:

• Placeholder text appears in empty paragraphs
• Loader animation appears during AI generation
• Slash commands trigger correctly
• Cancel button works during generation
• Multiple error messages don't stack/overlap

Related Issues

• Related to Bug: Status Messages Overlap with Admin Toolbar and Sidebar Navigation in Drupal #62: Original z-index issue (partially fixed)
• Related to Throbber animation CSS z-index issues #132: Throbber z-index (similar positioning pattern)
• Related to Replace generic AI connection error with detailed API response and fallback status messages #55: Error message content (not changed, but positioning improves UX)

Screenshots

Before (fixed to viewport)

Error appears at top: 0, right: 10px of viewport regardless of editor position.

After (relative to editor)

Error appears at top-right of the editor container, moving with the editor.

---

🤖 Generated with Claude Code