(UI) - Keys Page - Show 100 Keys Per Page, Use full height, increase width of key alias (#9064)

* show 100 keys + increase height of keys

* fix key_alias

* litellm show key alias full width

ui/litellm-dashboard/src/components/all_keys_table.tsx

@@ -187,6 +187,14 @@ export function AllKeysTable({
         </div>
       ),
     },
+    {
+      header: "Key Alias",
+      accessorKey: "key_alias",
+      cell: (info) => {
+        const value = info.getValue() as string;
+        return <Tooltip title={value}>{value ? (value.length > 20 ? `${value.slice(0, 20)}...` : value) : "-"}</Tooltip>
+      }
+    },
     {
       header: "Secret Key",
       accessorKey: "key_name",
@@ -206,12 +214,6 @@ export function AllKeysTable({
       accessorKey: "team_id",
       cell: (info) => <Tooltip title={info.getValue() as string}>{info.getValue() ? `${(info.getValue() as string).slice(0, 7)}...` : "-"}</Tooltip>
     },
-
-    {
-      header: "Key Alias",
-      accessorKey: "key_alias",
-      cell: (info) => <Tooltip title={info.getValue() as string}>{info.getValue() ? `${(info.getValue() as string).slice(0, 7)}...` : "-"}</Tooltip>
-    },
     {
       header: "Organization ID",
       accessorKey: "organization_id",
@@ -370,7 +372,7 @@ export function AllKeysTable({
               </div>
             </div>
           </div>
-          <div className="h-[32rem] overflow-auto">
+          <div className="h-[75vh] overflow-auto">
             
             <DataTable
               columns={columns.filter(col => col.id !== 'expander')}

ui/litellm-dashboard/src/components/view_key_table.tsx

@@ -412,7 +412,7 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
         isLoading={isLoading}
         pagination={pagination}
         onPageChange={handlePageChange}
-        pageSize={50}
+        pageSize={100}
         teams={teams}
         selectedTeam={selectedTeam}
         setSelectedTeam={setSelectedTeam}