chore: warning messages too long in model config caused ui issue (#27542)

Author: iamjoel

web/app/components/header/account-setting/model-provider-page/index.tsx

@@ -93,7 +93,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
           {defaultModelNotConfigured && (
             <div className='system-xs-medium flex items-center gap-1 text-text-primary'>
               <RiAlertFill className='h-4 w-4 text-text-warning-secondary' />
-              {t('common.modelProvider.notConfigured')}
+              <span className='max-w-[460px] truncate' title={t('common.modelProvider.notConfigured')}>{t('common.modelProvider.notConfigured')}</span>
             </div>
           )}
           <SystemModelSelector

web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx

@@ -37,15 +37,18 @@ const ConfigProvider = ({
   const notAllowCustomCredential = provider.allow_custom_token === false
 
   const renderTrigger = useCallback(() => {
+    const text = hasCredential ? t('common.operation.config') : t('common.operation.setup')
     const Item = (
       <Button
-        className='grow'
+        className='flex grow'
         size='small'
         variant={!authorized ? 'secondary-accent' : 'secondary'}
+        title={text}
       >
-        <RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
-        {hasCredential && t('common.operation.config')}
-        {!hasCredential && t('common.operation.setup')}
+        <RiEqualizer2Line className='mr-1 h-3.5 w-3.5 shrink-0' />
+        <span className='w-0 grow truncate text-left'>
+          {text}
+        </span>
       </Button>
     )
     if (notAllowCustomCredential && !hasCredential) {