diff --git a/web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx
index 39bafa5c43..2e601819da 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx
@@ -35,20 +35,25 @@ const ProviderCard: FC<ProviderCardProps> = ({
 
   return (
     <div
-      className='group relative flex flex-col justify-between px-4 py-3 h-[148px] border-[0.5px] border-black/5 rounded-xl shadow-xs hover:shadow-lg'
+      className='group relative flex flex-col px-4 py-3 h-[148px] border-[0.5px] border-black/5 rounded-xl shadow-xs hover:shadow-lg'
       style={{ background: provider.background || DEFAULT_BACKGROUND_COLOR }}
     >
-      <div>
+      <div className='grow h-0'>
         <div className='py-0.5'>
           <ProviderIcon provider={provider} />
         </div>
         {
           provider.description && (
-            <div className='mt-1 leading-4 text-xs text-black/[48]'>{provider.description[language] || provider.description.en_US}</div>
+            <div
+              className='mt-1 leading-4 text-xs text-black/[48] line-clamp-4'
+              title={provider.description[language] || provider.description.en_US}
+            >
+              {provider.description[language] || provider.description.en_US}
+            </div>
           )
         }
       </div>
-      <div>
+      <div className='shrink-0'>
         <div className={'flex flex-wrap group-hover:hidden gap-0.5'}>
           {
             provider.supported_model_types.map(modelType => (