a

src/components/ChatBox.tsx

@@ -100,10 +100,12 @@ export default function ChatBox({ showAllMessagesTab = false, className = "", st
       className={`bg-white dark:bg-neutral-900 rounded-lg shadow-lg flex flex-col ${
         startExpanded 
           ? className 
-          : `w-80 ${minimized ? "min-h-[2.5rem] px-4 py-2" : "h-96 px-4 py-4"} ${className}`
+          : minimized 
+            ? "w-80 h-10 px-3 py-1" 
+            : "w-80 h-96 px-4 py-4"
       }`}
     >
-      <div className={`flex items-center justify-between ${startExpanded ? "px-4 py-2 border-b border-gray-200 dark:border-neutral-800" : ""}`} style={startExpanded ? {} : { minHeight: '2rem' }}>
+      <div className={`flex items-center justify-between ${startExpanded ? "px-4 py-2 border-b border-gray-200 dark:border-neutral-800" : ""}`} style={startExpanded ? {} : { minHeight: minimized ? '2rem' : '2rem' }}>
         <span className="font-semibold text-gray-800 dark:text-gray-100">MeshCore Chat</span>
         {!startExpanded && (
           <button

src/components/MapWithChatClient.tsx

@@ -28,7 +28,9 @@ export default function MapWithChat({ nodePositions }: MapWithChatProps) {
       <div className="flex-1 relative">
         <MapView />
         <div className="absolute bottom-6 right-6 z-30">
-          <ChatBox showAllMessagesTab={false} startExpanded={false} className="w-80 h-96" />
+          <div className="w-80">
+            <ChatBox showAllMessagesTab={false} startExpanded={false} className="w-full" />
+          </div>
         </div>
       </div>
     </div>