From 226d026caee9a56c8fb6ce8ff84cdff2f90c544a Mon Sep 17 00:00:00 2001
From: paula <pau9ale@gmail.com>
Date: Tue, 17 Feb 2026 17:01:53 +0100
Subject: [PATCH 1/2] fix: make social cards clickable and remove z-index
 trickery

---
 app/components/CallToAction.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/components/CallToAction.vue b/app/components/CallToAction.vue
index 81f01c690..281a22d4e 100644
--- a/app/components/CallToAction.vue
+++ b/app/components/CallToAction.vue
@@ -25,6 +25,18 @@ const socialLinks = computed(() => [
     ctaKey: $t('about.get_involved.follow.cta'),
   },
 ])
+
+function handleCardClick(event: MouseEvent) {
+  if ((event.target as HTMLElement).closest('a')) return
+  if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return
+
+  const selection = window.getSelection()
+  if (selection && selection.type === 'Range') return
+
+  const card = event.currentTarget as HTMLElement
+  const link = card.querySelector('a')
+  link?.click()
+}
 </script>
 
 <template>
@@ -37,15 +49,16 @@ const socialLinks = computed(() => [
       <div
         v-for="link in socialLinks"
         :key="link.id"
-        class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
+        @click="handleCardClick"
+        class="cursor-pointer group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
       >
-        <h3 class="z-1 flex gap-2">
+        <h3 class="flex gap-2">
           <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
           <span class="font-medium text-fg">
             {{ link.titleKey }}
           </span>
         </h3>
-        <p class="z-1 text-sm text-fg-muted leading-relaxed">
+        <p class="text-sm text-fg-muted leading-relaxed">
           {{ link.descriptionKey }}
         </p>
         <a
@@ -56,7 +69,6 @@ const socialLinks = computed(() => [
         >
           {{ link.ctaKey }}
           <span class="i-lucide:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
-          <span class="absolute z-0 inset-0" aria-hidden="true" />
         </a>
       </div>
     </div>

From d97c702fcb3e85cd34b8d349c76b257f3d8506b4 Mon Sep 17 00:00:00 2001
From: paula <pau9ale@gmail.com>
Date: Wed, 18 Feb 2026 15:57:45 +0100
Subject: [PATCH 2/2] apply code review feedback: use :any-link

---
 app/components/CallToAction.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/CallToAction.vue b/app/components/CallToAction.vue
index 281a22d4e..58587249c 100644
--- a/app/components/CallToAction.vue
+++ b/app/components/CallToAction.vue
@@ -27,7 +27,7 @@ const socialLinks = computed(() => [
 ])
 
 function handleCardClick(event: MouseEvent) {
-  if ((event.target as HTMLElement).closest('a')) return
+  if ((event.target as HTMLElement).closest(':any-link')) return
   if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return
 
   const selection = window.getSelection()