From ce3df78d8af5264c145a97cbcb243a97561316ef Mon Sep 17 00:00:00 2001
From: Tejas Panchal <tejaspanchal127@gmail.com>
Date: Mon, 23 Feb 2026 00:58:46 +0530
Subject: [PATCH] made related anime to max width

---
 src/pages/watch/Watch.jsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/pages/watch/Watch.jsx b/src/pages/watch/Watch.jsx
index 9033d4d..1824eab 100644
--- a/src/pages/watch/Watch.jsx
+++ b/src/pages/watch/Watch.jsx
@@ -289,7 +289,7 @@ export default function Watch() {
               </div>
 
               {/* Episode List (Mobile only) */}
-              <div className="hidden max-[1200px]:block bg-[#141414] rounded-xl overflow-hidden shadow-lg border border-white/5">
+              <div className="hidden max-[1200px]:block w-full bg-[#141414] rounded-xl overflow-hidden shadow-lg border border-white/5">
                 {!episodes ? (
                   <div className="flex-1 flex items-center justify-center min-h-[300px]">
                     <BouncingLoader />
@@ -354,7 +354,7 @@ export default function Watch() {
 
               {/* Seasons (Mobile only) */}
               {seasons?.length > 0 && (
-                <div className="hidden max-[1200px]:block bg-[#141414] rounded-xl p-4 shadow-lg border border-white/5">
+                <div className="hidden max-[1200px]:block w-full bg-[#141414] rounded-xl p-4 shadow-lg border border-white/5">
                   <h2 className="text-lg font-bold mb-4 text-white">More Seasons</h2>
                   <div className="grid grid-cols-2 gap-3">
                     {seasons.map((season, idx) => (
@@ -373,6 +373,14 @@ export default function Watch() {
                   </div>
                 </div>
               )}
+
+              {/* Related Anime (Mobile only) */}
+              {!animeInfoLoading && animeInfo?.related_data?.length > 0 && (
+                <div className="hidden max-[1200px]:block w-full bg-[#141414] rounded-xl p-4 shadow-lg border border-white/5">
+                  <h2 className="text-lg font-bold mb-4 text-white">Related Anime</h2>
+                  <Sidecard data={animeInfo.related_data} className="!mt-0" />
+                </div>
+              )}
             </div>
 
             {/* Right Column (Desktop Only) */}
@@ -399,13 +407,7 @@ export default function Watch() {
               )}
             </div>
 
-            {/* Related Anime (Mobile only) */}
-            {!animeInfoLoading && animeInfo?.related_data?.length > 0 && (
-              <div className="hidden max-[1200px]:block bg-[#141414] rounded-xl p-4 shadow-lg border border-white/5">
-                <h2 className="text-lg font-bold mb-4 text-white">Related Anime</h2>
-                <Sidecard data={animeInfo.related_data} className="!mt-0" />
-              </div>
-            )}
+
           </div>
         </div>
       </div>