Skip to content

Fix AI assistant demo panel placement#459

Merged
tannerlinsley merged 2 commits into
mainfrom
taren/fix-ai-assistant-panel
Jun 5, 2026
Merged

Fix AI assistant demo panel placement#459
tannerlinsley merged 2 commits into
mainfrom
taren/fix-ai-assistant-panel

Conversation

@tannerlinsley
Copy link
Copy Markdown
Member

@tannerlinsley tannerlinsley commented Jun 5, 2026

Summary

Fixes the generated React AI add-on header assistant so the opened chat panel stays inside the viewport. The panel previously opened with left-full from the header button and a fixed 700px width, which could push the input and send button off-screen.

This changes the panel to a fixed, viewport-bound overlay with responsive width and height. It also adds a patch changeset for @tanstack/create.

Validation

  • pnpm --filter @tanstack/create build
  • pnpm --filter @tanstack/create test
  • pnpm --filter @tanstack/create exec prettier --check src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx
  • Commit hook: nx run-many --target=build --parallel 5
  • Commit hook: pnpm test:unit && pnpm test:e2e

Summary by CodeRabbit

  • Bug Fixes

    • Fixed AI assistant demo panel so it stays within the viewport and no longer overflows screen bounds.
  • Style

    • Updated assistant panel layout to use fixed positioning with responsive sizing for different viewports.
    • Added height constraints and overflow handling to improve display and scrolling behavior.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jun 5, 2026

Lost in the diff? Review this PR in Change Stack to follow the change map from intent to exact ranges.

Review Change Stack

Caution

Review failed

Pull request was closed or merged during review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 93c11b63-bbc2-4875-bda0-5f780c28989b

📥 Commits

Reviewing files that changed from the base of the PR and between cb68faf and 4fe8d97.

📒 Files selected for processing (1)
  • packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx
✅ Files skipped from review due to trivial changes (1)
  • packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx

📝 Walkthrough

Hidden review stack artifact

Walkthrough

The PR updates the AI assistant demo panel to use fixed overlay positioning that keeps it centered and within the viewport, replacing the previous absolute positioning. A changeset records this as a patch-level fix ensuring the panel remains visible.

Changes

AI Assistant Panel Fixed Positioning

Layer / File(s) Summary
Fixed overlay positioning
packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx, .changeset/flat-ai-assistant.md
Panel container styling changed from absolute off-canvas layout to fixed centered overlay with inset-x-4, top-20, responsive height (h-[calc(100vh-6rem)], max-h-[600px]), and overflow-hidden to keep the assistant within the viewport. Changeset declares the patch fix.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A panel that drifts off the screen,
now stays put, right there to be seen,
Fixed in place with a calc so keen,
responsive and tidy, serene! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Fix AI assistant demo panel placement' directly and clearly summarizes the main change—repositioning the AI assistant panel to stay within the viewport.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch taren/fix-ai-assistant-panel

Comment @coderabbitai help to get the list of available commands and usage tips.

@tannerlinsley tannerlinsley marked this pull request as ready for review June 5, 2026 19:09
@tannerlinsley tannerlinsley merged commit 8f4d144 into main Jun 5, 2026
6 of 7 checks passed
@tannerlinsley tannerlinsley deleted the taren/fix-ai-assistant-panel branch June 5, 2026 19:13
@github-actions github-actions Bot mentioned this pull request Jun 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant