fix(frontend): optimize mobile toolbar layout for long team/model names (#224)

- Add compact icon mode to QuotaUsage component that shows only a coin
  icon with tooltip when space is constrained
- Calculate combined team + model name length threshold to auto-switch
  quota display to compact mode on mobile (<640px)
- Set minimum width (60px/50px) for TeamSelector and ModelSelector on
  mobile to ensure they remain clickable even with long names
- Add flex-shrink to selectors to allow graceful text truncation while
  maintaining clickable touch targets

Co-authored-by: qdaxb <4157870+qdaxb@users.noreply.github.com>

Author: qdaxb

frontend/src/features/tasks/components/ChatArea.tsx

@@ -26,6 +26,8 @@ import { useToast } from '@/hooks/use-toast';
 import { taskApis } from '@/apis/tasks';
 
 const SHOULD_HIDE_QUOTA_NAME_LIMIT = 18;
+// Threshold for combined team name + model name length to trigger compact quota mode
+const COMPACT_QUOTA_NAME_THRESHOLD = 22;
 
 interface ChatAreaProps {
   teams: Team[];
@@ -161,6 +163,15 @@ export default function ChatArea({
     return selectedTeam.name.trim().length > SHOULD_HIDE_QUOTA_NAME_LIMIT;
   }, [selectedTeam, isMobile]);
 
+  // Determine if compact quota mode should be used (icon only)
+  // On mobile, when combined team + model name exceeds threshold, use compact mode
+  const shouldUseCompactQuota = React.useMemo(() => {
+    if (!isMobile) return false;
+    const teamNameLength = selectedTeam?.name?.trim().length || 0;
+    const modelNameLength = selectedModel?.name?.trim().length || 0;
+    return teamNameLength + modelNameLength > COMPACT_QUOTA_NAME_THRESHOLD;
+  }, [isMobile, selectedTeam?.name, selectedModel?.name]);
+
   const handleTeamChange = (team: Team | null) => {
     console.log('[ChatArea] handleTeamChange called:', team?.name || 'null', team?.id || 'null');
     setSelectedTeam(team);
@@ -529,7 +540,9 @@ export default function ChatArea({
                       )}
                     </div>
                     <div className="ml-auto flex items-center gap-2 flex-shrink-0">
-                      {!shouldHideQuotaUsage && <QuotaUsage className="flex-shrink-0" />}
+                      {!shouldHideQuotaUsage && (
+                        <QuotaUsage className="flex-shrink-0" compact={shouldUseCompactQuota} />
+                      )}
                       {selectedTaskDetail?.status === 'PENDING' ? (
                         <Button
                           variant="ghost"
@@ -669,7 +682,9 @@ export default function ChatArea({
                     )}
                   </div>
                   <div className="ml-auto flex items-center gap-2 flex-shrink-0">
-                    {!shouldHideQuotaUsage && <QuotaUsage className="flex-shrink-0" />}
+                    {!shouldHideQuotaUsage && (
+                      <QuotaUsage className="flex-shrink-0" compact={shouldUseCompactQuota} />
+                    )}
                     {selectedTaskDetail?.status === 'PENDING' ? (
                       <Button
                         variant="ghost"

frontend/src/features/tasks/components/ModelSelector.tsx

@@ -235,8 +235,8 @@ export default function ModelSelector({
     <div className="flex items-center gap-0">
       {/* Model selector with integrated checkbox in dropdown */}
       <div
-        className="flex items-center space-x-2 min-w-0"
-        style={{ maxWidth: isMobile ? 140 : 180 }}
+        className="flex items-center space-x-2 min-w-0 flex-shrink"
+        style={{ maxWidth: isMobile ? 140 : 180, minWidth: isMobile ? 50 : 70 }}
       >
         <CpuChipIcon
           className={`w-3 h-3 text-text-muted flex-shrink-0 ml-1 ${isLoading || externalLoading ? 'animate-pulse' : ''}`}

frontend/src/features/tasks/components/QuotaUsage.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { Coins } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -9,9 +10,11 @@ import { useToast } from '@/hooks/use-toast';
 
 type QuotaUsageProps = {
   className?: string;
+  // When true, display only an icon instead of full text (for mobile space constraints)
+  compact?: boolean;
 };
 
-export default function QuotaUsage({ className }: QuotaUsageProps) {
+export default function QuotaUsage({ className, compact = false }: QuotaUsageProps) {
   const { t } = useTranslation('common');
   const { toast } = useToast();
   const [quota, setQuota] = useState<QuotaData | null>(null);
@@ -109,6 +112,30 @@ export default function QuotaUsage({ className }: QuotaUsageProps) {
     </div>
   );
 
+  // Compact mode: show only icon with tooltip
+  if (compact) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={`h-6 w-6 flex-shrink-0 ${className ?? ''}`}
+            style={{
+              padding: 0,
+            }}
+          >
+            <Coins className="w-4 h-4 text-text-muted hover:text-text-primary" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <div className="text-xs mb-1">{brief}</div>
+          {detail}
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
   return (
     <Tooltip>
       <TooltipTrigger asChild>

frontend/src/features/tasks/components/TeamSelector.tsx

@@ -116,9 +116,9 @@ export default function TeamSelector({
 
   return (
     <div
-      className="flex items-center space-x-2 min-w-0"
+      className="flex items-center space-x-2 min-w-0 flex-shrink"
       data-tour="team-selector"
-      style={{ maxWidth: isMobile ? 200 : 260 }}
+      style={{ maxWidth: isMobile ? 200 : 260, minWidth: isMobile ? 60 : 80 }}
     >
       <FaUsers
         className={`w-3 h-3 text-text-muted flex-shrink-0 ml-1 ${isLoading ? 'animate-pulse' : ''}`}