fix: eliminate layout shift when switching app types with Claude plugin sync

- Separate sync button containers for Codex and Claude modes
- Only render the container in corresponding app type to prevent layout jumping
- Apply same fix pattern as commit 0bcc04a for VS Code sync button
This commit is contained in:
Jason
2025-10-01 21:33:29 +08:00
parent 45a639e73f
commit db832a9654

View File

@@ -320,11 +320,10 @@ const ProviderList: React.FC<ProviderListProps> = ({
</div>
<div className="flex items-center gap-2 ml-4">
{/* VS Code 按钮占位容器 - 始终保持空间,避免布局跳动 */}
<div className="w-[130px]">
{appType === "codex" &&
provider.category !== "official" &&
isCurrent && (
{/* 同步按钮占位容器 - 只在对应模式下渲染,避免布局跳动 */}
{appType === "codex" ? (
<div className="w-[130px]">
{provider.category !== "official" && isCurrent && (
<button
onClick={() =>
vscodeAppliedFor === provider.id
@@ -348,10 +347,12 @@ const ProviderList: React.FC<ProviderListProps> = ({
: t("provider.applyToVSCode")}
</button>
)}
</div>
) : null}
{appType === "claude" &&
provider.category !== "official" &&
isCurrent && (
{appType === "claude" ? (
<div className="w-[130px]">
{provider.category !== "official" && isCurrent && (
<button
onClick={() =>
claudeApplied
@@ -375,7 +376,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
: t("provider.applyToClaudePlugin")}
</button>
)}
</div>
</div>
) : null}
<button
onClick={() => onSwitch(provider.id)}
disabled={isCurrent}