From cb68faf51107bcdc96899c5d724a3ed8e6086ca1 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Fri, 5 Jun 2026 12:06:18 -0600
Subject: [PATCH] Fix AI assistant demo panel placement

---
 .changeset/flat-ai-assistant.md                              | 5 +++++
 .../add-ons/ai/assets/src/components/demo-AIAssistant.tsx    | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/flat-ai-assistant.md

diff --git a/.changeset/flat-ai-assistant.md b/.changeset/flat-ai-assistant.md
new file mode 100644
index 00000000..7f4c1901
--- /dev/null
+++ b/.changeset/flat-ai-assistant.md
@@ -0,0 +1,5 @@
+---
+"@tanstack/create": patch
+---
+
+Keep the generated AI assistant demo panel inside the viewport.
diff --git a/packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx b/packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx
index b896cbeb..370d3ba1 100644
--- a/packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx
+++ b/packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx
@@ -97,7 +97,7 @@ export default function AIAssistant() {
       </button>
 
       {isOpen && (
-        <div className="absolute bottom-0 left-full ml-2 w-[700px] h-[600px] bg-gray-900 rounded-lg shadow-xl border border-orange-500/20 flex flex-col">
+        <div className="fixed inset-x-4 top-20 z-[100] flex h-[calc(100vh-6rem)] max-h-[600px] flex-col overflow-hidden rounded-lg border border-orange-500/20 bg-gray-900 shadow-xl sm:left-auto sm:w-[min(calc(100vw-2rem),700px)]">
           <div className="flex items-center justify-between p-3 border-b border-orange-500/20">
             <h3 className="font-semibold text-white">AI Assistant</h3>
             <button