fix: model selector's trigger ui

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

@@ -37,7 +37,7 @@ const ModelName: FC<ModelNameProps> = ({
   if (!modelItem)
     return null
   return (
-    <div className={cn('flex items-center overflow-hidden text-ellipsis truncate text-components-input-text-filled system-sm-regular', className)}>
+    <div className={cn('flex gap-0.5 items-center overflow-hidden text-ellipsis truncate text-components-input-text-filled system-sm-regular', className)}>
       <div
         className='truncate'
         title={modelItem.label[language] || modelItem.label.en_US}

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

@@ -42,33 +42,35 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
       )}
     >
       <ModelIcon
-        className='shrink-0 mr-1.5'
+        className='shrink-0 m-1'
         provider={provider}
         modelName={model.model}
       />
-      <ModelName
+      <div className='flex px-1 py-[3px] items-center gap-1 grow'>
-        className='grow'
+        <ModelName
-        modelItem={model}
+          className='grow'
-        showMode
+          modelItem={model}
-        showFeatures
+          showMode
-      />
+          showFeatures
-      {!readonly && (
+        />
-        <div className='shrink-0 flex items-center justify-center w-4 h-4'>
+        {!readonly && (
-          {
+          <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-            model.status !== ModelStatusEnum.active
+            {
-              ? (
+              model.status !== ModelStatusEnum.active
-                <Tooltip popupContent={MODEL_STATUS_TEXT[model.status][language]}>
+                ? (
-                  <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+                  <Tooltip popupContent={MODEL_STATUS_TEXT[model.status][language]}>
-                </Tooltip>
+                    <AlertTriangle className='w-4 h-4 text-text-warning-secondary' />
-              )
+                  </Tooltip>
-              : (
+                )
-                <RiArrowDownSLine
+                : (
-                  className='w-3.5 h-3.5 text-text-tertiary'
+                  <RiArrowDownSLine
-                />
+                    className='w-3.5 h-3.5 text-text-tertiary'
-              )
+                  />
-          }
+                )
-        </div>
+            }
-      )}
+          </div>
+        )}
+      </div>
     </div>
   )
 }