From 3111979bb46c9a82ce940980af628ad94913022d Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Sat, 27 Sep 2025 14:27:19 +0800
Subject: [PATCH] feat(components): replace spans with Ellipsis for model
 labels

Use Ellipsis component to handle text overflow in model labels for better readability
---
 src/renderer/src/components/ApiModelLabel.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/ApiModelLabel.tsx b/src/renderer/src/components/ApiModelLabel.tsx
index b2e08635fe..68cc3dbbaf 100644
--- a/src/renderer/src/components/ApiModelLabel.tsx
+++ b/src/renderer/src/components/ApiModelLabel.tsx
@@ -3,6 +3,8 @@ import { getModelLogo } from '@renderer/config/models'
 import { ApiModel } from '@renderer/types'
 import React from 'react'
 
+import Ellipsis from './Ellipsis'
+
 export interface ModelLabelProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
   model?: ApiModel
   classNames?: {
@@ -18,9 +20,9 @@ export const ApiModelLabel: React.FC<ModelLabelProps> = ({ model, className, cla
   return (
     <div className={cn('flex items-center gap-1', className, classNames?.container)} {...props}>
       <Avatar src={model ? getModelLogo(model.id) : undefined} className={cn('h-4 w-4', classNames?.avatar)} />
-      <span className={classNames?.modelName}>{model?.name}</span>
+      <Ellipsis className={classNames?.modelName}>{model?.name}</Ellipsis>
       <span className={classNames?.divider}> | </span>
-      <span className={classNames?.providerName}>{model?.provider}</span>
+      <Ellipsis className={classNames?.providerName}>{model?.provider_name}</Ellipsis>
     </div>
   )
 }