From 29cff36eef6e0c4a74fbcf2eaa1d66dad3f4da01 Mon Sep 17 00:00:00 2001
From: Anil Matcha <matcha72@gmail.com>
Date: Sat, 21 Mar 2026 19:04:53 +0530
Subject: [PATCH] fix: use margin-auto centering for Cinema Studio prompt bar

Replace translate-based centering (md:left-1/2 md:-translate-x-1/2)
with margin-auto approach (md:left-0 md:right-0 md:mx-auto) to fix
prompt bar not being centered when rendered inside Tailwind v4 host app.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/studio/src/components/CinemaStudio.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/studio/src/components/CinemaStudio.jsx b/packages/studio/src/components/CinemaStudio.jsx
index 93b989e..fea7ebf 100644
--- a/packages/studio/src/components/CinemaStudio.jsx
+++ b/packages/studio/src/components/CinemaStudio.jsx
@@ -650,7 +650,7 @@ export default function CinemaStudio({ apiKey, onGenerationComplete, historyItem
 
             {/* ── 3. Floating Prompt Bar ── */}
             <div
-                className={`absolute bottom-8 left-4 right-4 md:left-1/2 md:-translate-x-1/2 md:w-full md:max-w-4xl z-30 transition-all duration-700 ${showCanvas ? 'opacity-0 pointer-events-none translate-y-20' : 'opacity-100 translate-y-0'}`}
+                className={`absolute bottom-8 left-4 right-4 md:left-0 md:right-0 md:mx-auto md:max-w-4xl z-30 transition-all duration-700 ${showCanvas ? 'opacity-0 pointer-events-none translate-y-20' : 'opacity-100 translate-y-0'}`}
             >
                 <div className="bg-[#1a1a1a] border border-white/10 rounded-[2rem] p-4 flex justify-between shadow-3xl items-end relative">