🐛 fix(mobile): fix chat input buttons cut off and hide cloud row

- Make mobile container flex-col with overflow-hidden so ChatPanel
  properly fills remaining space after title bar
- Add flex-1 min-h-0 to ChatPanel for correct flex sizing
- Use safe-area-inset-bottom padding for mobile bottom spacing
- Hide cloud button row on mobile
- Update landing page copy (Capsule → React Native Vibe Code)
- Center prompt gallery search bar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: bidah

apps/web/app/(app)/p/[id]/page.tsx

@@ -2372,7 +2372,7 @@ function ProjectPageInternal() {
         ) : (
           <>
         {/* Mobile mode: Show selected panel based on mobile toggle (hidden on md and up) */}
-        <div className="flex-1 h-full md:hidden">
+        <div className="flex-1 flex flex-col h-full md:hidden overflow-hidden">
             {/* Editable Project Title for mobile */}
             <EditableProjectTitle
               projectTitle={currentProject?.title || (firstMessage ? 'Creating New Project...' : 'New Project')}

apps/web/components/chat-panel-input.tsx

@@ -527,10 +527,9 @@ export const ChatPanelInput = memo(function ChatPanelInput({
 
   return (
     <div
-      className="p-2 pt-0 border-t bg-background flex-shrink-0 pb-4 w-full"
+      className="p-2 pt-0 border-t bg-background flex-shrink-0 w-full"
       style={{
-        // On mobile, use sticky positioning and account for safe area
-        // paddingBottom: isMobile ? 'max(1rem, env(safe-area-inset-bottom))' : undefined,
+        paddingBottom: 'max(1rem, env(safe-area-inset-bottom))',
       }}
     >
       {/* Show selection indicator when element is selected */}
@@ -735,8 +734,8 @@ export const ChatPanelInput = memo(function ChatPanelInput({
             </Button>
           </div>
         </div>
-        {/* Cloud row - new bottom row */}
-        <div className="relative flex items-center gap-x-2 bg-background border-t-1 -m-2 p-2 pl-2">
+        {/* Cloud row - new bottom row (hidden on mobile) */}
+        <div className="relative hidden md:flex items-center gap-x-2 bg-background border-t-1 -m-2 p-2 pl-2">
           {/* Invisible overlay when panel is open - clicking it dismisses the panel */}
           {isCloudPanelOpen && (
             <div

apps/web/components/landing-features.tsx

@@ -38,7 +38,7 @@ export function LandingFeatures() {
             <span className="font-bold">vibe coding ideas into mobile and web apps</span>
           </h3>
           <p className="text-muted-foreground text-md md:text-lg max-w-2xl mx-auto">
-            Capsule codes for you, so you can create apps by just prompting text or using your voice.
+            The app agent codes for you, so you can create apps by just prompting text or using your voice.
           </p>
         </div>
 
@@ -52,7 +52,7 @@ export function LandingFeatures() {
                   The best code agent by default
                 </h3>
                 <p className="text-muted-foreground text-sm md:text-base leading-relaxed">
-                  Capsule integrates Claude Code the revolutionary coding agent that is shaking the internet. Its a magical combination. We integrated the Claude Code Agent SDK and set by default Claude Opus 4.5 the most powerful coding model on the planet. 
+                  React Native Vibe Code integrates Claude Code the revolutionary coding agent that is shaking the internet. Its a magical combination. We integrated the Claude Code Agent SDK and set by default Claude Opus 4.5 the most powerful coding model on the planet. 
                 </p>
               </div>
               <div className="flex flex-col gap-2 min-w-[300px]">
@@ -169,7 +169,7 @@ export function LandingFeatures() {
                 Cloud: Backend and Database
               </h3>
               <p className="text-muted-foreground text-sm md:text-base leading-relaxed max-w-2xl mb-8">
-                The magic of having an app that not only builds UI but also connects all the pieces to a database and backend logic. This is the most powerful feature of Capsule. Every new app you create can get this integration by enabling the cloud option. After enabling it the code agent knows and creates fullstack apps always for you from there on.<br/> Powered by <Link className="underline" target='_blank' href="https://convex.dev">Convex.</Link>
+                The magic of having an app that not only builds UI but also connects all the pieces to a database and backend logic. Every new app you create can get this integration by enabling the cloud option. After enabling it the code agent knows and creates fullstack apps always for you from there on.<br/> Powered by <Link className="underline" target='_blank' href="https://convex.dev">Convex.</Link>
               </p>
               <div className="flex items-center justify-center gap-4 md:gap-6">
                 {/* Backend */}
@@ -218,7 +218,7 @@ export function LandingFeatures() {
                 <div className="w-full p-4 rounded-lg bg-muted-foreground/5 border border-muted-foreground/10">
                   <div className="flex items-center gap-3">
                     <div className="w-3 h-3 rounded-full bg-green-500 animate-pulse" />
-                    <span className="text-sm text-muted-foreground font-mono">http://my-amazing-app.capsulethis.app</span>
+                    <span className="text-sm text-muted-foreground font-mono">http://my-amazing-app.pages.dev</span>
                   </div>
                 </div>
               </div>

apps/web/components/ui-prompts/prompt-gallery.tsx

@@ -136,7 +136,7 @@ export function PromptGallery() {
   return (
     <div className="space-y-8">
       {/* Search Bar */}
-      <div className="relative">
+      <div className="relative max-w-[500px] mx-auto">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
         <Input
           type="text"

packages/chat/src/components/chat-panel.tsx

@@ -183,7 +183,7 @@ export function ChatPanel({
   }, [projectId, sandboxId, userId])
 
   return (
-    <div className="flex flex-col border-r relative overflow-hidden h-full">
+    <div className="flex flex-col border-r relative overflow-hidden h-full flex-1 min-h-0">
 
       {/* Messages Container with Conversation (use-stick-to-bottom) */}
       {renderMessages({