Merge pull request algoscope-hq#270 from tanushkat96/fix/visualizer-layout-scroll

fix: improve visualizer layout and scroll behavior

Author: Bimbok

src/components/AlgoCard.jsx

@@ -31,6 +31,7 @@ export default function AlgoCard({
   return (
     <MotionLink
       to={link}
+      onClick={() => window.scrollTo(0, 0)}
       className={`group relative block w-full rounded-3xl p-8 backdrop-blur-xl transition-all duration-500 ease-out text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500/50 overflow-hidden ${colorClasses} border hover:-translate-y-2 hover:shadow-[0_30px_60px_-15px_rgba(0,0,0,0.8)]`}
       variants={cardVariants}
       whileHover={{ y: -10 }}

src/components/visualizer/CodePanel.jsx

@@ -17,18 +17,30 @@ const CodePanel = memo(function CodePanel({
   const activeTheme = themes[theme] ?? themes.vscDarkPlus
 
   useEffect(() => {
-    if (!activeLine || !scrollContainerRef.current) {
-      return
-    }
+    if (!activeLine || !scrollContainerRef.current) return
 
     const activeNode = scrollContainerRef.current.querySelector(
       `[data-line-number="${activeLine}"]`
     )
 
-    activeNode?.scrollIntoView({
-      block: 'nearest',
-      behavior: 'smooth',
-    })
+    if (activeNode) {
+      const container = scrollContainerRef.current
+
+      const containerTop = container.scrollTop
+      const containerBottom = containerTop + container.clientHeight
+
+      const nodeTop = activeNode.offsetTop
+      const nodeBottom = nodeTop + activeNode.clientHeight
+
+      if (nodeTop < containerTop) {
+        container.scrollTo({ top: nodeTop - 20, behavior: 'smooth' })
+      } else if (nodeBottom > containerBottom) {
+        container.scrollTo({
+          top: nodeBottom - container.clientHeight + 20,
+          behavior: 'smooth',
+        })
+      }
+    }
   }, [activeLine])
 
   useEffect(() => {