From 90b57eb5cb05fe49903e9508a95918bf7b956ee7 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Fri, 23 Jan 2026 19:42:12 +0800
Subject: [PATCH] fix: provider selector button hidden by long model names
 (#4631)

* Initial plan

* Fix long model name overflow in ProviderSelector

Co-authored-by: Soulter <37870767+Soulter@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Soulter <37870767+Soulter@users.noreply.github.com>
---
 dashboard/src/components/shared/ProviderSelector.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/dashboard/src/components/shared/ProviderSelector.vue b/dashboard/src/components/shared/ProviderSelector.vue
index 5af114e17..3e32bc8e9 100644
--- a/dashboard/src/components/shared/ProviderSelector.vue
+++ b/dashboard/src/components/shared/ProviderSelector.vue
@@ -3,7 +3,7 @@
     <span v-if="!modelValue" style="color: rgb(var(--v-theme-primaryText));">
       {{ tm('providerSelector.notSelected') }}
     </span>
-    <span v-else>
+    <span v-else class="provider-name-text">
       {{ modelValue }}
     </span>
     <v-btn size="small" color="primary" variant="tonal" @click="openDialog">
@@ -228,6 +228,14 @@ function closeProviderDrawer() {
 </script>
 
 <style scoped>
+.provider-name-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: calc(100% - 80px);
+  display: inline-block;
+}
+
 .v-list-item {
   transition: all 0.2s ease;
 }