From 889d3967d21678be4679169b776b92c1ffad9528 Mon Sep 17 00:00:00 2001
From: streaper2 <streaper2@gmail.com>
Date: Sun, 10 May 2026 14:37:30 +0200
Subject: [PATCH] UI: force vertical sidebar on all devices and ensure it
 perfectly tracks the article height

---
 app/blog/[id]/page.tsx          | 35 +++++++++++++++++++--------------
 components/BlogShareButtons.tsx | 18 ++++++++---------
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/app/blog/[id]/page.tsx b/app/blog/[id]/page.tsx
index 9b3c432..d2b51f5 100644
--- a/app/blog/[id]/page.tsx
+++ b/app/blog/[id]/page.tsx
@@ -77,23 +77,19 @@ export default async function BlogPostPage({ params }: Props) {
       {/* Injection du style de force pour le texte */}
       <style dangerouslySetInnerHTML={{ __html: noBreakStyle }} />
 
-      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Navigation */}
-        <div className="mb-8">
-          <Link href="/blog" className="inline-flex items-center text-gray-500 hover:text-brand-600 text-sm font-medium transition-colors">
-            <ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
-          </Link>
-        </div>
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex gap-4 lg:gap-8 justify-center relative items-start">
+        {/* Conteneur principal de l'article */}
+        <div className="w-[calc(100%-3rem)] sm:w-full max-w-3xl relative">
 
-        <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>
+          {/* Navigation */}
+          <div className="mb-8">
+            <Link href="/blog" className="inline-flex items-center text-gray-500 hover:text-brand-600 text-sm font-medium transition-colors">
+              <ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
+            </Link>
           </div>
-          {/* Image d'en-tête */}
+
+          <div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100 relative z-10">
+            {/* Image d'en-tête */}
           <div className="w-full h-64 md:h-80 relative mb-8 rounded-lg overflow-hidden">
             <img
               src={post.imageUrl}
@@ -155,6 +151,15 @@ export default async function BlogPostPage({ params }: Props) {
             </div>
           </div>
         </div>
+        </div>
+
+        {/* Sidebar flottante verticale à droite (suit l'article et s'arrête à la fin) */}
+        <div className="w-10 shrink-0 relative">
+          <div className="sticky top-1/2 -translate-y-1/2 pt-24 lg:pt-0">
+            <BlogShareButtons title={post.title} />
+          </div>
+        </div>
+
       </div>
     </article>
   );
diff --git a/components/BlogShareButtons.tsx b/components/BlogShareButtons.tsx
index d92bdef..5da7340 100644
--- a/components/BlogShareButtons.tsx
+++ b/components/BlogShareButtons.tsx
@@ -32,41 +32,41 @@ export default function BlogShareButtons({ title }: Props) {
   if (!url) return null;
 
   return (
-    <div className="flex flex-row lg:flex-col gap-3 z-50">
+    <div className="flex flex-col gap-3 z-50">
       <a 
         href={shareLinks.facebook}
         target="_blank"
         rel="noopener noreferrer"
-        className="w-12 h-12 lg:w-10 lg:h-10 rounded-full bg-white text-[#1877F2] shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
+        className="w-10 h-10 rounded-full bg-white text-[#1877F2] shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
         title="Partager sur Facebook"
       >
-        <Facebook className="w-6 h-6 lg:w-5 lg:h-5" />
+        <Facebook className="w-5 h-5" />
       </a>
       
       <a 
         href={shareLinks.twitter}
         target="_blank"
         rel="noopener noreferrer"
-        className="w-12 h-12 lg:w-10 lg:h-10 rounded-full bg-white text-black shadow-xl flex items-center justify-center hover:scale-110 transition-transform border border-gray-100"
+        className="w-10 h-10 rounded-full bg-white text-black shadow-xl flex items-center justify-center hover:scale-110 transition-transform border border-gray-100"
         title="Partager sur X (Twitter)"
       >
-        <Twitter className="w-6 h-6 lg:w-5 lg:h-5" />
+        <Twitter className="w-5 h-5" />
       </a>
       
       <button 
         onClick={() => handleCopy('Lien copié ! Vous pouvez le coller sur Instagram.')}
-        className="w-12 h-12 lg:w-10 lg:h-10 rounded-full bg-gradient-to-tr from-[#f9ce34] via-[#ee2a7b] to-[#6228d7] text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
+        className="w-10 h-10 rounded-full bg-gradient-to-tr from-[#f9ce34] via-[#ee2a7b] to-[#6228d7] text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
         title="Copier le lien pour Instagram"
       >
-        <Instagram className="w-6 h-6 lg:w-5 lg:h-5" />
+        <Instagram className="w-5 h-5" />
       </button>
 
       <button 
         onClick={() => handleCopy()}
-        className="w-12 h-12 lg:w-10 lg:h-10 rounded-full bg-gray-800 text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
+        className="w-10 h-10 rounded-full bg-gray-800 text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
         title="Copier le lien"
       >
-        {copied ? <Check className="w-6 h-6 lg:w-5 lg:h-5 text-green-400" /> : <LinkIcon className="w-6 h-6 lg:w-5 lg:h-5" />}
+        {copied ? <Check className="w-5 h-5 text-green-400" /> : <LinkIcon className="w-5 h-5" />}
       </button>
     </div>
   );