fix(frontend): improve chat input status indicator responsiveness (#11202)

Co-authored-by: Hiep Le <69354317+hieptl@users.noreply.github.com>
Co-authored-by: mamoodi <mamoodiha@gmail.com>
Co-authored-by: chuckbutkus <chuck@all-hands.dev>
Co-authored-by: openhands <openhands@all-hands.dev>
Co-authored-by: Robert Brennan <accounts@rbren.io>
Co-authored-by: Jamie Chicago <87397251+jamiechicago312@users.noreply.github.com>

frontend/src/components/features/chat/components/chat-input-actions.tsx

@@ -25,6 +25,7 @@ export function ChatInputActions({
         <ServerStatus conversationStatus={conversationStatus} />
       </div>
       <AgentStatus
+        className="ml-2 md:ml-3"
         handleStop={() => handleStop(onStop)}
         handleResumeAgent={handleResumeAgent}
         disabled={disabled}

frontend/src/components/features/controls/agent-status.tsx

@@ -61,8 +61,11 @@ export function AgentStatus({
   }, [shouldShownAgentLoading, setShouldShownAgentLoading]);
 
   return (
-    <div className={`flex items-center gap-1 ${className}`}>
-      <span className="text-[11px] text-white font-normal leading-5">
+    <div className={cn("flex items-center gap-1 min-w-0", className)}>
+      <span
+        className="text-[11px] text-white font-normal leading-5 flex-1 min-w-0 max-w-full whitespace-normal break-words"
+        title={t(statusCode)}
+      >
         {t(statusCode)}
       </span>
       <div