related anime fix

src/components/sidecard/Sidecard.jsx

@@ -5,13 +5,12 @@ import {
   faMicrophone,
 } from "@fortawesome/free-solid-svg-icons";
 import { useLanguage } from "@/src/context/LanguageContext";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import useToolTipPosition from "@/src/hooks/useToolTipPosition";
 import Qtip from "../qtip/Qtip";
 
 function Sidecard({ data, label, className }) {
   const { language } = useLanguage();
-  const navigate = useNavigate();
   const [hoverTimeout, setHoverTimeout] = useState(null);
   const handleMouseEnter = (item, index) => {
     const timeout = setTimeout(() => {
@@ -37,6 +36,13 @@ function Sidecard({ data, label, className }) {
               key={index}
               className="group"
               ref={(el) => (cardRefs.current[index] = el)}
+              onMouseEnter={() => handleMouseEnter(item, index)}
+              onMouseLeave={handleMouseLeave}
+            >
+              <Link
+                to={`/${item.id}`}
+                onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+                className="block"
               >
                 <div className="flex items-start gap-3 p-2 rounded-lg transition-colors hover:bg-[#1f1f1f]">
                   {hoveredItem === item.id + index && window.innerWidth > 1024 && (
@@ -57,19 +63,12 @@ function Sidecard({ data, label, className }) {
                   <img
                     src={`${item.poster}`}
                     alt={item.title}
-                  className="w-[50px] h-[70px] rounded object-cover cursor-pointer transition-transform group-hover:scale-105"
-                  onClick={() => navigate(`/watch/${item.id}`)}
-                  onMouseEnter={() => handleMouseEnter(item, index)}
-                  onMouseLeave={handleMouseLeave}
+                    className="w-[50px] h-[70px] rounded object-cover"
                   />
                   <div className="flex flex-col gap-1.5 flex-1 min-w-0">
-                  <Link
-                    to={`/${item.id}`}
-                    className="text-sm font-medium text-gray-200 hover:text-white transition-colors line-clamp-1"
-                    onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
-                  >
+                    <span className="text-sm font-medium text-gray-200 group-hover:text-white transition-colors line-clamp-1">
                       {language === "EN" ? item.title : item.japanese_title}
-                  </Link>
+                    </span>
                     <div className="flex flex-wrap items-center gap-2">
                       {item.tvInfo?.sub && (
                         <div className="flex items-center gap-1 px-1.5 py-0.5 bg-[#2a2a2a] rounded text-gray-300">
@@ -101,6 +100,7 @@ function Sidecard({ data, label, className }) {
                     </div>
                   </div>
                 </div>
+              </Link>
             </div>
           ))}
       </div>

src/pages/watch/Watch.jsx

@@ -226,7 +226,7 @@ export default function Watch() {
   }, [animeId, animeInfo]);
   return (
     <div className="w-full min-h-screen bg-[#0a0a0a]">
-      <div className="w-full max-w-[1920px] mx-auto px-6 pt-[80px] pb-12 max-[1200px]:pt-[48px] max-[1024px]:px-4 max-md:pt-[32px]">
+      <div className="w-full max-w-[1920px] mx-auto px-6 pt-[80px] pb-6 max-[1200px]:pt-[48px] max-[1024px]:px-4 max-md:pt-[32px]">
         <div className="grid grid-cols-[minmax(0,70%),minmax(0,30%)] gap-6 w-full h-full max-[1200px]:flex max-[1200px]:flex-col">
           {/* Left Column - Player, Controls, Servers */}
           <div className="flex flex-col w-full gap-6">