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)}
disabled={isCurrent}
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
? "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"
)}
>
<Play size={14} />
{!isCurrent && <Play size={14} />}
{isCurrent ? "使用中" : "启用"}
</button>