From 83150290915c2478f1ce4ed916a8454b1aaaedf8 Mon Sep 17 00:00:00 2001
From: Michilis <michael@azzamo.be>
Date: Thu, 12 Feb 2026 02:17:01 +0000
Subject: [PATCH] fix: resolve ShareButtons hydration error by deferring native
 share check to client

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/components/ShareButtons.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ShareButtons.tsx b/frontend/src/components/ShareButtons.tsx
index 1ccc5de..f131b25 100644
--- a/frontend/src/components/ShareButtons.tsx
+++ b/frontend/src/components/ShareButtons.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useLanguage } from '@/context/LanguageContext';
 import { 
   ShareIcon,
@@ -18,6 +18,12 @@ interface ShareButtonsProps {
 export default function ShareButtons({ title, url, description }: ShareButtonsProps) {
   const { locale } = useLanguage();
   const [copied, setCopied] = useState(false);
+  const [supportsNativeShare, setSupportsNativeShare] = useState(false);
+
+  // Check for native share support only after mount to avoid hydration mismatch
+  useEffect(() => {
+    setSupportsNativeShare(typeof navigator !== 'undefined' && typeof navigator.share === 'function');
+  }, []);
   
   // Use provided URL or current page URL
   const shareUrl = url || (typeof window !== 'undefined' ? window.location.href : '');
@@ -133,7 +139,7 @@ export default function ShareButtons({ title, url, description }: ShareButtonsPr
         </button>
         
         {/* Native Share (mobile) */}
-        {typeof navigator !== 'undefined' && typeof navigator.share === 'function' && (
+        {supportsNativeShare && (
           <button
             onClick={handleNativeShare}
             className="w-10 h-10 flex items-center justify-center rounded-full bg-primary-yellow text-primary-dark hover:bg-primary-yellow/90 transition-colors"