From e1daafac8b0adc059b14ba45525d76a04d047b74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D8=AD=D9=8E=D8=A7=D8=B2=D9=90=D9=85=D9=8F=20=D9=85=D9=8F?=
 =?UTF-8?q?=D8=AD=D9=8E=D9=85=D9=8E=D9=91=D8=AF=D9=8D?=
 <122169138+hazemezz123@users.noreply.github.com>
Date: Sat, 4 Apr 2026 18:50:22 +0200
Subject: [PATCH] fix(web-app): stabilize skill card hover state (#449)

---
 apps/web-app/src/components/SkillCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web-app/src/components/SkillCard.tsx b/apps/web-app/src/components/SkillCard.tsx
index dfa81db9..99b18005 100644
--- a/apps/web-app/src/components/SkillCard.tsx
+++ b/apps/web-app/src/components/SkillCard.tsx
@@ -22,7 +22,7 @@ export const SkillCard = React.memo(({ skill, starCount }: SkillCardProps) => {
         >
             <Link
                 to={`/skill/${skill.id}`}
-                className="group flex flex-col h-full rounded-lg border border-slate-200 bg-white p-6 shadow-sm transition-all hover:bg-slate-50 hover:shadow-md dark:border-slate-800 dark:bg-slate-900 dark:hover:border-indigo-500/50"
+                className="group flex flex-col h-full rounded-lg border border-slate-200 bg-white p-6 shadow-sm transition-all hover:-translate-y-0.5 hover:border-indigo-200 hover:shadow-md dark:border-slate-800 dark:bg-slate-900 dark:hover:border-indigo-500/50"
             >
                 <div className="flex items-center justify-between mb-4">
                     <div className="flex items-center space-x-2">
@@ -40,7 +40,7 @@ export const SkillCard = React.memo(({ skill, starCount }: SkillCardProps) => {
                     />
                 </div>
 
-                <h3 className="text-lg font-bold text-slate-900 dark:text-slate-50 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors mb-2 line-clamp-1">
+                <h3 className="text-lg font-bold text-slate-900 dark:text-slate-50 mb-2 line-clamp-1">
                     @{skill.name}
                 </h3>