[Fix] UI - TeamDropdown: Match org dropdown styling and fix test mock

- Use Select.Option with font-medium alias + Text secondary ID to match OrganizationDropdown
- Default page size to 20
- Add useInfiniteTeams mock to AddModelForm tests

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/litellm-dashboard/src/components/add_model/AddModelForm.test.tsx

@@ -65,6 +65,21 @@ vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({
   default: vi.fn(),
 }));
 
+vi.mock("@/app/(dashboard)/hooks/teams/useTeams", () => ({
+  useInfiniteTeams: () => ({
+    data: {
+      pages: [{
+        teams: [{ team_id: "team-1", team_alias: "Test Team", organization_id: "org-1" }],
+        total: 1, page: 1, page_size: 20, total_pages: 1,
+      }],
+    },
+    fetchNextPage: vi.fn(),
+    hasNextPage: false,
+    isFetchingNextPage: false,
+    isLoading: false,
+  }),
+}));
+
 vi.mock("@/app/(dashboard)/hooks/guardrails/useGuardrails", () => ({
   useGuardrails: vi.fn().mockReturnValue({
     data: [{ guardrail_name: "test-guardrail" }],

ui/litellm-dashboard/src/components/common_components/team_dropdown.tsx

@@ -1,10 +1,12 @@
 import React, { useMemo, useState, type UIEvent } from "react";
-import { Select } from "antd";
+import { Select, Typography } from "antd";
 import { LoadingOutlined } from "@ant-design/icons";
 import { useDebouncedState } from "@tanstack/react-pacer/debouncer";
 import { useInfiniteTeams } from "@/app/(dashboard)/hooks/teams/useTeams";
 import { Team } from "../key_team_helpers/key_list";
 
+const { Text } = Typography;
+
 interface TeamDropdownProps {
   value?: string;
   onChange?: (value: string) => void;
@@ -25,7 +27,7 @@ const TeamDropdown: React.FC<TeamDropdownProps> = ({
   onTeamSelect,
   disabled,
   organizationId,
-  pageSize = 50,
+  pageSize = 20,
 }) => {
   const [searchInput, setSearchInput] = useState("");
   const [debouncedSearch, setDebouncedSearch] = useDebouncedState("", {
@@ -58,15 +60,6 @@ const TeamDropdown: React.FC<TeamDropdownProps> = ({
     return result;
   }, [data]);
 
-  const options = useMemo(
-    () =>
-      teams.map((team) => ({
-        label: `${team.team_alias} (${team.team_id})`,
-        value: team.team_id,
-      })),
-    [teams],
-  );
-
   const handlePopupScroll = (e: UIEvent<HTMLDivElement>) => {
     const target = e.currentTarget;
     const scrollRatio =
@@ -103,7 +96,6 @@ const TeamDropdown: React.FC<TeamDropdownProps> = ({
       onPopupScroll={handlePopupScroll}
       loading={isLoading}
       notFoundContent={isLoading ? <LoadingOutlined spin /> : "No teams found"}
-      options={options}
       popupRender={(menu) => (
         <>
           {menu}
@@ -114,7 +106,14 @@ const TeamDropdown: React.FC<TeamDropdownProps> = ({
           )}
         </>
       )}
-    />
+    >
+      {teams.map((team) => (
+        <Select.Option key={team.team_id} value={team.team_id}>
+          <span className="font-medium">{team.team_alias}</span>{" "}
+          <Text type="secondary">({team.team_id})</Text>
+        </Select.Option>
+      ))}
+    </Select>
   );
 };