From d606196e06058b50cfaa741275288fd65aa6d162 Mon Sep 17 00:00:00 2001
From: poyrazavsever <poyrazavsever@hotmail.com>
Date: Sun, 30 Aug 2026 20:10:33 +0300
Subject: [PATCH] fix(projects): preserve popover card width

---
 components/home-projects-section.tsx     | 3 ++-
 components/project-card-with-popover.tsx | 7 +++++--
 components/projects-content.tsx          | 1 +
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/home-projects-section.tsx b/components/home-projects-section.tsx
index 32a0e1b..760c043 100644
--- a/components/home-projects-section.tsx
+++ b/components/home-projects-section.tsx
@@ -59,7 +59,8 @@ export function HomeProjectsSection() {
               architecture={getLocalizedValue(project.architecture, locale)}
               technologiesLabel={tProjects("technologies")}
               architectureLabel={tProjects("architecture")}
-              className="aspect-square w-56 shrink-0 rounded-sm border-border md:w-[calc((100vw-8rem)/4)] md:max-w-56"
+              triggerClassName="w-56 shrink-0 md:w-[calc((100vw-8rem)/4)] md:max-w-56"
+              className="aspect-square rounded-sm border-border"
             />
           ))}
         </div>
diff --git a/components/project-card-with-popover.tsx b/components/project-card-with-popover.tsx
index f8b86a4..9b3b6cd 100644
--- a/components/project-card-with-popover.tsx
+++ b/components/project-card-with-popover.tsx
@@ -20,6 +20,7 @@ type ProjectCardWithPopoverProps = {
   technologiesLabel: string;
   architectureLabel: string;
   className?: string;
+  triggerClassName?: string;
 };
 
 export function ProjectCardWithPopover({
@@ -33,6 +34,7 @@ export function ProjectCardWithPopover({
   technologiesLabel,
   architectureLabel,
   className,
+  triggerClassName,
 }: ProjectCardWithPopoverProps) {
   const [open, setOpen] = useState(false);
   const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -69,6 +71,7 @@ export function ProjectCardWithPopover({
       className={className}
     />
   );
+  const triggerClasses = `block ${triggerClassName ?? ""} text-inherit outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`;
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -76,7 +79,7 @@ export function ProjectCardWithPopover({
         {href ? (
           <a
             href={href}
-            className="block text-inherit no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            className={`${triggerClasses} no-underline`}
             onPointerEnter={showPopover}
             onPointerLeave={scheduleClose}
             onFocus={showPopover}
@@ -87,7 +90,7 @@ export function ProjectCardWithPopover({
         ) : (
           <button
             type="button"
-            className="block border-0 bg-transparent p-0 text-left text-inherit outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            className={`${triggerClasses} border-0 bg-transparent p-0 text-left`}
             onPointerEnter={showPopover}
             onPointerLeave={scheduleClose}
             onFocus={showPopover}
diff --git a/components/projects-content.tsx b/components/projects-content.tsx
index e44e8a6..85cd353 100644
--- a/components/projects-content.tsx
+++ b/components/projects-content.tsx
@@ -99,6 +99,7 @@ function ProjectSection({
               architecture={item.architecture}
               technologiesLabel={technologiesLabel}
               architectureLabel={architectureLabel}
+              triggerClassName="w-full"
               className="aspect-square rounded-sm border-border"
             />
           </StaggerItem>