From 0bcc04adce50392aca5e753cbda53c218143252d Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sun, 28 Sep 2025 23:23:43 +0800
Subject: [PATCH] fix: eliminate layout shift when switching between Claude and
 Codex

- Wrap VS Code sync button in fixed-width container to maintain stable layout
- Only render the container in Codex mode to avoid unnecessary space in Claude mode
- Change card transition from 'all' to specific properties (border-color, box-shadow) to prevent layout animations
- These changes prevent the horizontal position jumping of provider cards during app switching
---
 src/components/ProviderList.tsx | 53 +++++++++++++++++----------------
 src/lib/styles.ts               |  2 +-
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/components/ProviderList.tsx b/src/components/ProviderList.tsx
index 73a7e5e..dfe94ae 100644
--- a/src/components/ProviderList.tsx
+++ b/src/components/ProviderList.tsx
@@ -271,32 +271,35 @@ const ProviderList: React.FC<ProviderListProps> = ({
                   </div>
 
                   <div className="flex items-center gap-2 ml-4">
-                    {appType === "codex" &&
-                      provider.category !== "official" && (
-                        <button
-                          onClick={() =>
-                            vscodeAppliedFor === provider.id
-                              ? handleRemoveFromVSCode()
-                              : handleApplyToVSCode(provider)
-                          }
-                          className={cn(
-                            "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors w-[130px] whitespace-nowrap justify-center",
-                            !isCurrent && "invisible",
-                            vscodeAppliedFor === provider.id
-                              ? "border border-gray-300 text-gray-600 hover:border-red-300 hover:text-red-600 hover:bg-red-50 dark:border-gray-600 dark:text-gray-400 dark:hover:border-red-800 dark:hover:text-red-400 dark:hover:bg-red-900/20"
-                              : "border border-gray-300 text-gray-700 hover:border-blue-300 hover:text-blue-600 hover:bg-blue-50 dark:border-gray-600 dark:text-gray-300 dark:hover:border-blue-700 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
-                          )}
-                          title={
-                            vscodeAppliedFor === provider.id
+                    {/* VS Code 按钮占位容器 - 始终保持空间，避免布局跳动 */}
+                    {appType === "codex" ? (
+                      <div className="w-[130px]">
+                        {provider.category !== "official" && isCurrent && (
+                          <button
+                            onClick={() =>
+                              vscodeAppliedFor === provider.id
+                                ? handleRemoveFromVSCode()
+                                : handleApplyToVSCode(provider)
+                            }
+                            className={cn(
+                              "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors w-full whitespace-nowrap justify-center",
+                              vscodeAppliedFor === provider.id
+                                ? "border border-gray-300 text-gray-600 hover:border-red-300 hover:text-red-600 hover:bg-red-50 dark:border-gray-600 dark:text-gray-400 dark:hover:border-red-800 dark:hover:text-red-400 dark:hover:bg-red-900/20"
+                                : "border border-gray-300 text-gray-700 hover:border-blue-300 hover:text-blue-600 hover:bg-blue-50 dark:border-gray-600 dark:text-gray-300 dark:hover:border-blue-700 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
+                            )}
+                            title={
+                              vscodeAppliedFor === provider.id
+                                ? t("provider.removeFromVSCode")
+                                : t("provider.applyToVSCode")
+                            }
+                          >
+                            {vscodeAppliedFor === provider.id
                               ? t("provider.removeFromVSCode")
-                              : t("provider.applyToVSCode")
-                          }
-                        >
-                          {vscodeAppliedFor === provider.id
-                            ? t("provider.removeFromVSCode")
-                            : t("provider.applyToVSCode")}
-                        </button>
-                      )}
+                              : t("provider.applyToVSCode")}
+                          </button>
+                        )}
+                      </div>
+                    ) : null}
                     <button
                       onClick={() => onSwitch(provider.id)}
                       disabled={isCurrent}
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
index 76b53b5..4fd257b 100644
--- a/src/lib/styles.ts
+++ b/src/lib/styles.ts
@@ -34,7 +34,7 @@ export const cardStyles = {
 
   // 带悬浮效果的卡片
   interactive:
-    "bg-white rounded-lg border border-gray-200 p-4 hover:border-gray-300 hover:shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:hover:border-gray-600 transition-all duration-200",
+    "bg-white rounded-lg border border-gray-200 p-4 hover:border-gray-300 hover:shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:hover:border-gray-600 transition-[border-color,box-shadow] duration-200",
 
   // 选中/激活态卡片
   selected: