From 94de36e937c5c9ee76aea417ff3e340d04d32a86 Mon Sep 17 00:00:00 2001
From: streaper2 <streaper2@gmail.com>
Date: Sun, 10 May 2026 14:33:38 +0200
Subject: [PATCH] UI: make floating share buttons stop at the end of the
 article

---
 app/blog/[id]/page.tsx          | 12 +++++++++---
 components/BlogShareButtons.tsx |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/blog/[id]/page.tsx b/app/blog/[id]/page.tsx
index 34c927c..9b3c432 100644
--- a/app/blog/[id]/page.tsx
+++ b/app/blog/[id]/page.tsx
@@ -73,10 +73,9 @@ export default async function BlogPostPage({ params }: Props) {
   }
 
   return (
-    <article className="bg-gray-50 min-h-screen py-12 relative">
+    <article className="bg-gray-50 min-h-screen py-12 relative overflow-x-clip">
       {/* Injection du style de force pour le texte */}
       <style dangerouslySetInnerHTML={{ __html: noBreakStyle }} />
-      <BlogShareButtons title={post.title} />
 
       <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Navigation */}
@@ -86,7 +85,14 @@ export default async function BlogPostPage({ params }: Props) {
           </Link>
         </div>
 
-        <div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100">
+        <div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100 relative">
+          
+          {/* Conteneur pour les boutons flottants (s'arrête à la fin de l'article) */}
+          <div className="absolute top-0 bottom-0 right-4 lg:-right-16 pointer-events-none z-50 h-full">
+            <div className="sticky top-auto bottom-4 lg:top-1/2 lg:-translate-y-1/2 lg:bottom-auto pointer-events-auto pt-24 lg:pt-0">
+              <BlogShareButtons title={post.title} />
+            </div>
+          </div>
           {/* Image d'en-tête */}
           <div className="w-full h-64 md:h-80 relative mb-8 rounded-lg overflow-hidden">
             <img
diff --git a/components/BlogShareButtons.tsx b/components/BlogShareButtons.tsx
index bbcb364..d92bdef 100644
--- a/components/BlogShareButtons.tsx
+++ b/components/BlogShareButtons.tsx
@@ -32,7 +32,7 @@ export default function BlogShareButtons({ title }: Props) {
   if (!url) return null;
 
   return (
-    <div className="fixed bottom-4 right-4 lg:top-1/2 lg:right-8 lg:-translate-y-1/2 lg:bottom-auto flex flex-col gap-3 z-50">
+    <div className="flex flex-row lg:flex-col gap-3 z-50">
       <a 
         href={shareLinks.facebook}
         target="_blank"