@@ -87,7 +87,7 @@ const StatCard = ({ title, value, icon: Icon, color, trend, theme }) => (
8787 < motion . div
8888 initial = { { opacity : 0 , y : 20 } }
8989 animate = { { opacity : 1 , y : 0 } }
90- className = { `${ theme . card } rounded-xl p-6 border ${ color } /20 hover:border-${ color } /40 transition-all` }
90+ className = { `${ theme . card } rounded-xl p-6 border ${ color } /20 hover:border-${ color } /40 transition-all h-full ` }
9191 >
9292 < div className = "flex items-center justify-between" >
9393 < div >
@@ -121,23 +121,23 @@ const ProviderCard = ({ provider, onConfigure, onTest, onDisable, onDelete, them
121121 return (
122122 < motion . div
123123 whileHover = { { scale : 1.02 } }
124- className = { `${ theme . card } rounded-xl p-6 border border-${ statusColor } /20 hover:border-${ statusColor } /40 transition-all` }
124+ className = { `${ theme . card } rounded-xl p-6 border border-${ statusColor } /20 hover:border-${ statusColor } /40 transition-all h-full flex flex-col ` }
125125 >
126126 < div className = "flex items-start justify-between mb-4" >
127127 < div className = "flex items-center gap-3" >
128- < div className = "w-12 h-12 rounded-lg flex items-center justify-center" style = { { backgroundColor : `${ providerColor } 20` } } >
128+ < div className = "w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0 " style = { { backgroundColor : `${ providerColor } 20` } } >
129129 { PROVIDER_LOGOS [ provider . type ] ? (
130130 < img src = { PROVIDER_LOGOS [ provider . type ] } alt = { provider . name } className = "w-8 h-8" />
131131 ) : (
132132 < Brain className = "h-6 w-6" style = { { color : providerColor } } />
133133 ) }
134134 </ div >
135- < div >
136- < h3 className = { `text-lg font-semibold ${ theme . text . primary } ` } > { provider . name } </ h3 >
135+ < div className = "min-w-0" >
136+ < h3 className = { `text-lg font-semibold ${ theme . text . primary } truncate ` } > { provider . name } </ h3 >
137137 < p className = { `text-sm ${ theme . text . secondary } ` } > { provider . type } </ p >
138138 </ div >
139139 </ div >
140- < span className = { `px-3 py-1 rounded-full text-xs font-medium bg-${ statusColor } /20 text-${ statusColor } ` } >
140+ < span className = { `px-3 py-1 rounded-full text-xs font-medium bg-${ statusColor } /20 text-${ statusColor } flex-shrink-0 ` } >
141141 { provider . status }
142142 </ span >
143143 </ div >
@@ -148,14 +148,17 @@ const ProviderCard = ({ provider, onConfigure, onTest, onDisable, onDelete, them
148148 < p className = { `text-lg font-semibold ${ theme . text . primary } ` } > { provider . models || 0 } </ p >
149149 </ div >
150150 < div >
151- < p className = { `text-xs ${ theme . text . secondary } mb-1` } > Avg Cost </ p >
151+ < p className = { `text-xs ${ theme . text . secondary } mb-1` } > Usage </ p >
152152 < p className = { `text-lg font-semibold ${ theme . text . primary } ` } >
153- { provider . avg_cost_per_1m ? `$$ {provider . avg_cost_per_1m . toFixed ( 2 ) } ` : '$0.00' } /1M
153+ { provider . usage_count != null ? `${ provider . usage_count } requests ` : '0 requests' }
154154 </ p >
155155 </ div >
156156 </ div >
157157
158- < div className = "flex gap-2" >
158+ { /* Spacer pushes actions to bottom */ }
159+ < div className = "flex-grow" />
160+
161+ < div className = "flex gap-2 mt-auto pt-2" >
159162 < button
160163 onClick = { ( ) => onConfigure ( provider ) }
161164 className = "flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 transition-colors"
@@ -890,7 +893,7 @@ export default function LiteLLMManagement() {
890893 < p className = { `${ theme . text . secondary } ` } > No providers configured yet. Click "Add Provider" to get started.</ p >
891894 </ div >
892895 ) : (
893- < div className = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" >
896+ < div className = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-fr " >
894897 { providers . map ( provider => (
895898 < ProviderCard
896899 key = { provider . id }
0 commit comments