fix: stabilize provider action button width and improve visual consistency

- Set fixed width (76px) for enable/active buttons to prevent layout shift
- Hide play icon in active state to optimize space usage
- Add center alignment and nowrap to ensure consistent appearance
This commit is contained in:
Jason
2025-09-22 22:16:47 +08:00
parent b17d915086
commit 7e9930fe50

View File

@@ -305,13 +305,13 @@ const ProviderList: React.FC<ProviderListProps> = ({
onClick={() => onSwitch(provider.id)} onClick={() => onSwitch(provider.id)}
disabled={isCurrent} disabled={isCurrent}
className={cn( className={cn(
"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors", "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors w-[76px] justify-center whitespace-nowrap",
isCurrent isCurrent
? "bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500 cursor-not-allowed" ? "bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500 cursor-not-allowed"
: "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700" : "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700"
)} )}
> >
<Play size={14} /> {!isCurrent && <Play size={14} />}
{isCurrent ? "使用中" : "启用"} {isCurrent ? "使用中" : "启用"}
</button> </button>