article : center game block on click, capped below menu closes #62

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

site/blueprints/pages/article.yml

@@ -70,8 +70,8 @@ tabs:
                     extends: blocks/image
                   video:
                     extends: blocks/video
-                  jeu:
+                  game:
-                    extends: blocks/jeu
+                    extends: blocks/game
                   white-paper:
                     extends: blocks/white-paper
 

src/styles/index.css

@@ -17,5 +17,5 @@
 @import "./blocks/list.css";
 @import "./blocks/quote.css";
 @import "./blocks/image.css";
-@import "./blocks/jeu.css";
+@import "./blocks/game.css";
 @import "./blocks/white-paper.css";

src/views/Article.svelte

@@ -45,7 +45,23 @@
           iframe.style.pointerEvents = 'auto'
           container.classList.add('game-active')
           overlay.setAttribute('data-state', 'played')
-          container.scrollIntoView({ behavior: 'smooth', block: 'center' })
+
+          const menuHeight = document.querySelector('header')?.offsetHeight ?? 0
+          const minTop = menuHeight + 16
+          const rect = container.getBoundingClientRect()
+          const centeredTop = (window.innerHeight - rect.height) / 2
+          const targetTop = Math.max(centeredTop, minTop)
+
+          let scrollEl = container.parentElement
+          while (scrollEl && scrollEl !== document.body) {
+            const { overflow, overflowY } = getComputedStyle(scrollEl)
+            if (/auto|scroll/.test(overflow + overflowY)) break
+            scrollEl = scrollEl.parentElement
+          }
+          const base = (!scrollEl || scrollEl === document.body) ? window.scrollY : scrollEl.scrollTop
+          const target = base + rect.top - targetTop
+          ;(scrollEl && scrollEl !== document.body ? scrollEl : window)
+            .scrollTo({ top: target, behavior: 'smooth' })
         })
 
         deactivateBtn?.addEventListener('click', (e) => {