fix: prevent long team names from breaking UI layout

- Added maxLength to team creation input

- Truncated long team badges in user profile

pages/Teams.tsx

@@ -96,7 +96,7 @@ export const Teams: React.FC = () => {
             <form onSubmit={handleSave} className="space-y-5">
               <div>
                 <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1.5 block tracking-wider">Nome do Time</label>
-                <input type="text" placeholder="Ex: Vendas Sul" value={formData.name} onChange={e => setFormData({...formData, name:e.target.value})} className="w-full bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border p-3 rounded-lg text-sm text-zinc-900 dark:text-zinc-100 outline-none focus:ring-2 focus:ring-brand-yellow/20 transition-all" required />
+                <input type="text" placeholder="Ex: Vendas Sul" maxLength={25} value={formData.name} onChange={e => setFormData({...formData, name:e.target.value})} className="w-full bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border p-3 rounded-lg text-sm text-zinc-900 dark:text-zinc-100 outline-none focus:ring-2 focus:ring-brand-yellow/20 transition-all" required />
               </div>
               <div>
                 <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1.5 block tracking-wider">Descrição</label>

pages/UserProfile.tsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Camera, Save, Mail, User as UserIcon, Building, Shield, Loader2, CheckCircle2 } from 'lucide-react';
-import { getUserById, getTenants, updateUser, uploadAvatar } from '../services/dataService';
+import { getUserById, getTenants, getTeams, updateUser, uploadAvatar } from '../services/dataService';
 import { User, Tenant } from '../types';
 
 export const UserProfile: React.FC = () => {
   const [user, setUser] = useState<User | null>(null);
   const [tenant, setTenant] = useState<Tenant | null>(null);
+  const [teamName, setTeamName] = useState<string>('');
   const [isLoading, setIsLoading] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
@@ -31,6 +32,12 @@ export const UserProfile: React.FC = () => {
             if (userTenant) {
               setTenant(userTenant);
             }
+
+            if (fetchedUser.team_id) {
+              const teams = await getTeams(fetchedUser.tenant_id);
+              const userTeam = teams.find(t => t.id === fetchedUser.team_id);
+              if (userTeam) setTeamName(userTeam.name);
+            }
           }
         } catch (err) {
           console.error("Error fetching profile data:", err);
@@ -138,13 +145,13 @@ export const UserProfile: React.FC = () => {
             <h2 className="mt-4 text-lg font-bold text-zinc-900 dark:text-zinc-100">{user.name}</h2>
             <p className="text-zinc-500 dark:text-zinc-400 text-sm">{user.email}</p>
             
-            <div className="mt-4 flex flex-wrap justify-center gap-2">
-              <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-semibold capitalize border border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800">
+            <div className="mt-4 flex justify-center gap-2 max-w-full overflow-hidden px-2">
+              <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-semibold capitalize border border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800 whitespace-nowrap shrink-0">
                 {user.role === 'admin' ? 'Admin' : user.role === 'manager' ? 'Gerente' : user.role === 'super_admin' ? 'Super Admin' : 'Agente'}
               </span>
               {user.team_id && (
-                <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-semibold border border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800">
-                  {tenant?.name ? `Time ${tenant.name}` : user.team_id}
+                <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-semibold border border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800 truncate max-w-[160px]" title={teamName || user.team_id}>
+                  {teamName || user.team_id}
                 </span>
               )}
             </div>