From d7f873a4242f4e49ad7c51272c7f9618998f546a Mon Sep 17 00:00:00 2001
From: Vukasin <vukasinkubet@gmail.com>
Date: Tue, 10 Jun 2025 21:06:18 +0200
Subject: [PATCH] fix: mobile responsive text overlap

---
 .../thread/chat-input/chat-input.tsx          | 18 +++++++++---------
 .../thread/chat-input/message-input.tsx       | 19 ++++++++++++-------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/thread/chat-input/chat-input.tsx b/frontend/src/components/thread/chat-input/chat-input.tsx
index dbe4ad41..c9a46c65 100644
--- a/frontend/src/components/thread/chat-input/chat-input.tsx
+++ b/frontend/src/components/thread/chat-input/chat-input.tsx
@@ -249,15 +249,15 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
             }
           }}
         >
-          <div className="w-full text-sm flex flex-col justify-between items-start rounded-lg">            
-            <CardContent className={`w-full p-1.5 pb-2 ${bgColor} rounded-2xl border`}>                                      
-              <AttachmentGroup                
-              files={uploadedFiles || []}                
-              sandboxId={sandboxId}                
-              onRemove={removeUploadedFile}                
-              layout="inline"                
-              maxHeight="216px"                
-              showPreviews={true}              
+          <div className="w-full text-sm flex flex-col justify-between items-start rounded-lg">
+            <CardContent className={`w-full p-1.5 pb-2 ${bgColor} rounded-2xl border`}>
+              <AttachmentGroup
+                files={uploadedFiles || []}
+                sandboxId={sandboxId}
+                onRemove={removeUploadedFile}
+                layout="inline"
+                maxHeight="216px"
+                showPreviews={true}
               />
               <MessageInput
                 ref={textareaRef}
diff --git a/frontend/src/components/thread/chat-input/message-input.tsx b/frontend/src/components/thread/chat-input/message-input.tsx
index 321a2a90..97488a89 100644
--- a/frontend/src/components/thread/chat-input/message-input.tsx
+++ b/frontend/src/components/thread/chat-input/message-input.tsx
@@ -112,8 +112,9 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
     };
 
     return (
-      <div className="flex flex-col w-full h-auto gap-4 justify-between">
-        <div className="flex gap-2 items-center px-2">
+      <div className="relative flex flex-col w-full h-auto gap-4 justify-between">
+
+        <div className="flex flex-col gap-2 items-center px-2">
           <Textarea
             ref={ref}
             value={value}
@@ -129,6 +130,7 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
           />
         </div>
 
+
         <div className="flex items-center justify-between mt-1 ml-3 mb-1 pr-2">
           <div className="flex items-center gap-3">
             {!hideAttachments && (
@@ -155,11 +157,7 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
               <Tooltip>
                 <TooltipTrigger>
                   <p className='text-sm text-amber-500 hidden sm:block'>Upgrade for full performance</p>
-                  <div className='sm:hidden absolute bottom-0 left-0 right-0 flex justify-center'>
-                    <p className='text-xs text-amber-500 px-2 py-1'>
-                      Upgrade for better performance
-                    </p>
-                  </div>
+
                 </TooltipTrigger>
                 <TooltipContent>
                   <p>The free tier is severely limited by inferior models; upgrade to experience the true full Suna experience.</p>
@@ -205,6 +203,13 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
             </Button>
           </div>
         </div>
+        {subscriptionStatus === 'no_subscription' && !isLocalMode() &&
+          <div className='sm:hidden absolute -bottom-8 left-0 right-0 flex justify-center'>
+            <p className='text-xs text-amber-500 px-2 py-1'>
+              Upgrade for better performance
+            </p>
+          </div>
+        }
       </div>
     );
   },