From 483838618b0d418b6a4dc66fc2256928f372b8c9 Mon Sep 17 00:00:00 2001
From: Vukasin <vukasinkubet@gmail.com>
Date: Fri, 23 May 2025 00:01:07 +0200
Subject: [PATCH] fix: responsive free tier message

---
 .../thread/chat-input/message-input.tsx        | 18 +++++++++++++++++-
 .../thread/chat-input/model-selector.tsx       |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/thread/chat-input/message-input.tsx b/frontend/src/components/thread/chat-input/message-input.tsx
index d82dbfa2..af4802eb 100644
--- a/frontend/src/components/thread/chat-input/message-input.tsx
+++ b/frontend/src/components/thread/chat-input/message-input.tsx
@@ -142,7 +142,23 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
 
 
           </div>
-          {subscriptionStatus === 'no_subscription' && !isLocalMode() && <TooltipProvider><Tooltip><TooltipTrigger><p className='text-sm text-amber-500'>Upgrade for full performance</p></TooltipTrigger><TooltipContent><p>The free tier is severely limited by inferior models; upgrade to experience the true full Suna experience.</p></TooltipContent></Tooltip></TooltipProvider>}
+          {subscriptionStatus === 'no_subscription' && !isLocalMode() &&
+            <TooltipProvider>
+              <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 bg-background/80 backdrop-blur-sm px-2 py-1 rounded-md shadow-sm'>
+                      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>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          }
           <div className='flex items-center gap-2'>
             <ModelSelector
               selectedModel={selectedModel}
diff --git a/frontend/src/components/thread/chat-input/model-selector.tsx b/frontend/src/components/thread/chat-input/model-selector.tsx
index ba674f69..29c0ac4a 100644
--- a/frontend/src/components/thread/chat-input/model-selector.tsx
+++ b/frontend/src/components/thread/chat-input/model-selector.tsx
@@ -523,7 +523,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                   </Tooltip>
                 </TooltipProvider>
               )}
-              <span className="truncate max-w-[120px] sm:max-w-[160px] md:max-w-[200px] lg:max-w-none">{selectedLabel}</span>
+              <span className="truncate max-w-[100px] sm:max-w-[160px] md:max-w-[200px] lg:max-w-none">{selectedLabel}</span>
               <ChevronDown className="h-3 w-3 opacity-50 ml-1 flex-shrink-0" />
             </div>
           </Button>