ui: fix: chat panel matching cloud opitons and bottom of cards

Author: bidah

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

@@ -527,7 +527,7 @@ export const ChatPanelInput = memo(function ChatPanelInput({
 
   return (
     <div
-      className="p-4 border-t bg-background flex-shrink-0 md:relative md:pb-4 min-h-[214px] md:min-h-0 absolute"
+      className="p-2 pt-0 border-t bg-background flex-shrink-0 md:relative md:pb-4 min-h-[214px] md:min-h-0 absolute bottom-[5px]"
       style={{
         // On mobile, use sticky positioning and account for safe area
         // paddingBottom: isMobile ? 'max(1rem, env(safe-area-inset-bottom))' : undefined,
@@ -733,7 +733,7 @@ export const ChatPanelInput = memo(function ChatPanelInput({
           </div>
         </div>
         {/* Cloud row - new bottom row */}
-        <div className="relative flex items-center gap-x-2 pt-2 border-t border-border/50">
+        <div className="relative 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
@@ -747,7 +747,7 @@ export const ChatPanelInput = memo(function ChatPanelInput({
             size="sm"
             onClick={onCloudPanelOpen}
             className={cn(
-              "flex-col items-center justify-center w-[65px] h-[60px]",
+              "flex-col items-center justify-center w-[95px] h-[50px]",
               cloudEnabled
                 ? "bg-green-500/20 text-green-500 hover:bg-green-500/30 hover:text-green-400 border border-green-500/30"
                 : "text-muted-foreground hover:text-foreground"

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 max-h-[calc(100vh-100px)] min-h-[calc(100vh-100px)] overflow-hidden">
+    <div className="flex flex-col border-r relative  overflow-hidden">
 
       {/* Messages Container with Conversation (use-stick-to-bottom) */}
       {renderMessages({

packages/chat/src/components/message.tsx

@@ -187,7 +187,7 @@ const PureChatMessage = ({
 
   return (
     <div
-      className="group/message w-full pb-0"
+      className="group/message w-full mb-[80px]"
       data-role={message.role}
     >
       <div

packages/chat/src/components/messages.tsx

@@ -106,8 +106,8 @@ const PureMessages = ({
   const hasAssistantResponse = messages.some(m => m.role === "assistant");
 
   return (
-    <div className="flex-1 flex flex-col min-h-0">
-      <Conversation className="flex-1 overflow-y-auto min-h-0">
+    <div className="flex-1 flex flex-col min-h-0 ">
+      <Conversation className="flex-1 overflow-y-auto min-h-0 pb-[214px]">
         <ConversationContent
           className={contentClassName}
           style={{ maxHeight: maxHeight > 0 ? `${maxHeight}px` : undefined }}
@@ -145,6 +145,7 @@ const PureMessages = ({
         {/* Scroll button must be inside Conversation to access context */}
         <ConversationScrollButton />
       </Conversation>
+      <div className="h-[240px] w-full bg-red-500 "/>
     </div>
   );
 };