From 39981f8075479fb4905ee9d504d4e8b849b8d37f Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Mon, 20 Oct 2025 23:12:08 +0800
Subject: [PATCH] fix: eliminate layout shift when switching providers

- Use opacity transition instead of conditional rendering for "current" badge to prevent height changes
- Add min-h-[20px] to title row to maintain consistent height
- Use 2px border for active provider, 1px for inactive to improve visual distinction
- Remove global border-color rule that was overriding Tailwind utilities
- Use HSL arbitrary values for border colors to work with Tailwind 4 + shadcn/ui
---
 src/components/providers/ProviderCard.tsx | 23 +++++++++++++----------
 src/index.css                             |  1 -
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/providers/ProviderCard.tsx b/src/components/providers/ProviderCard.tsx
index a457742..7d9fb64 100644
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -90,12 +90,12 @@ export function ProviderCard({
   return (
     <div
       className={cn(
-        "rounded-lg border bg-card p-4 shadow-sm transition-[box-shadow,transform] duration-200",
+        "rounded-lg bg-card p-4 shadow-sm transition-all duration-200",
         isCurrent
-          ? "border-primary/70 bg-primary/5"
-          : "border-border hover:border-primary/40",
+          ? "border-2 border-[hsl(var(--primary))] bg-primary/5"
+          : "border border-[hsl(var(--border))] hover:border-primary/40",
         dragHandleProps?.isDragging &&
-          "cursor-grabbing border-primary/60 shadow-lg",
+          "cursor-grabbing border-2 border-[hsl(var(--primary)/.6)] shadow-lg",
       )}
     >
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
@@ -117,15 +117,18 @@ export function ProviderCard({
           </button>
 
           <div className="space-y-1">
-            <div className="flex flex-wrap items-center gap-2">
+            <div className="flex flex-wrap items-center gap-2 min-h-[20px]">
               <h3 className="text-base font-semibold leading-none">
                 {provider.name}
               </h3>
-              {isCurrent && (
-                <span className="rounded-full bg-green-500/10 px-2 py-0.5 text-xs font-medium text-green-500 dark:text-green-400">
-                  {t("provider.currentlyUsing")}
-                </span>
-              )}
+              <span
+                className={cn(
+                  "rounded-full bg-green-500/10 px-2 py-0.5 text-xs font-medium text-green-500 dark:text-green-400 transition-opacity duration-200",
+                  isCurrent ? "opacity-100" : "opacity-0 pointer-events-none"
+                )}
+              >
+                {t("provider.currentlyUsing")}
+              </span>
             </div>
 
             {displayUrl && (
diff --git a/src/index.css b/src/index.css
index b2a55c1..72e555f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -73,7 +73,6 @@
 /* 全局基础样式 */
 * {
   box-sizing: border-box;
-  border-color: hsl(var(--border));
 }
 
 html {