resolved episode list for responsive devices

src/components/episodelist/Episodelist.jsx

@@ -165,8 +165,7 @@ function Episodelist({
                           handleRangeSelect(item);
                           setActiveRange(item);
                         }}
-                        className={`hover:bg-[#3a3a3a] cursor-pointer transition-colors ${
+                        className={`hover:bg-[#3a3a3a] cursor-pointer transition-colors ${item === activeRange ? "bg-[#404040]" : ""
-                          item === activeRange ? "bg-[#404040]" : ""
                           }`}
                       >
                         <p className="font-medium text-[12px] p-2.5 flex justify-between items-center text-gray-300 hover:text-white max-[600px]:text-[11px] max-[600px]:p-2">
@@ -204,12 +203,8 @@ function Episodelist({
 
       <div ref={listContainerRef} className="w-full flex-1 overflow-y-auto bg-[#1a1a1a] max-h-[calc(100vh-200px)] max-[1200px]:max-h-[400px]">
         <div
-          className={`${
+          className={`${totalEpisodes > 30
-            totalEpisodes > 30
+              ? "p-4 grid grid-cols-5 gap-2 max-[600px]:p-2 max-[600px]:gap-1.5"
-              ? "p-4 grid gap-2 max-[600px]:p-2 max-[600px]:gap-1.5" + 
-                (totalEpisodes > 100 
-                  ? " grid-cols-5" 
-                  : " grid-cols-5 max-[1200px]:grid-cols-12 max-[860px]:grid-cols-10 max-[575px]:grid-cols-8 max-[478px]:grid-cols-6 max-[350px]:grid-cols-5")
               : ""
             }`}
         >
@@ -227,16 +222,14 @@ function Episodelist({
                   <div
                     key={item?.id}
                     ref={isActive ? activeEpisodeRef : null}
-                      className={`flex items-center justify-center rounded-lg h-[35px] text-[13px] font-medium cursor-pointer transition-all max-[600px]:h-[30px] max-[600px]:text-[12px] ${
+                    className={`flex items-center justify-center rounded-lg h-[35px] text-[13px] font-medium cursor-pointer transition-all max-[600px]:h-[30px] max-[600px]:text-[12px] ${item?.filler
-                        item?.filler
                         ? isActive
                           ? "bg-white text-black"
                           : "bg-[#2a2a2a] text-gray-400"
                         : ""
                       } hover:bg-[#404040] 
                           hover:text-white
-                       ${
+                       ${isActive
-                         isActive
                         ? "bg-white text-black ring-1 ring-white"
                         : "bg-[#2a2a2a] text-gray-400"
                       } ${isSearched ? "ring-2 ring-white" : ""}`}
@@ -265,12 +258,10 @@ function Episodelist({
                 <div
                   key={item?.id}
                   ref={isActive ? activeEpisodeRef : null}
-                    className={`w-full px-4 py-2.5 flex items-center justify-start gap-x-4 cursor-pointer transition-all max-[600px]:px-3 max-[600px]:py-2 max-[600px]:gap-x-3 ${
+                  className={`w-full px-4 py-2.5 flex items-center justify-start gap-x-4 cursor-pointer transition-all max-[600px]:px-3 max-[600px]:py-2 max-[600px]:gap-x-3 ${(index + 1) % 2 && !isActive
-                      (index + 1) % 2 && !isActive
                       ? "bg-[#202020]"
                       : "bg-[#1a1a1a]"
-                    } hover:bg-[#2a2a2a] ${
+                    } hover:bg-[#2a2a2a] ${isActive ? "bg-[#2a2a2a]" : ""
-                      isActive ? "bg-[#2a2a2a]" : ""
                     } ${isSearched ? "ring-1 ring-white" : ""}`}
                   onClick={() => {
                     if (episodeNumber) {
@@ -284,8 +275,7 @@ function Episodelist({
                     {index + 1}
                   </p>
                   <div className="w-full flex items-center justify-between gap-x-[5px]">
-                      <h1 className={`line-clamp-1 text-[14px] transition-colors max-[600px]:text-[13px] ${
+                    <h1 className={`line-clamp-1 text-[14px] transition-colors max-[600px]:text-[13px] ${isActive ? "text-white font-medium" : "text-gray-400 font-normal"
-                        isActive ? "text-white font-medium" : "text-gray-400 font-normal"
                       }`}>
                       {language === "EN" ? item?.title : item?.japanese_title}
                     </h1>

src/pages/watch/Watch.jsx

@@ -288,6 +288,22 @@ export default function Watch() {
                 </div>
               </div>
 
+              {/* Episode List (Mobile only) */}
+              <div className="hidden max-[1200px]:block 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 />
+                  </div>
+                ) : (
+                  <Episodelist
+                    episodes={episodes}
+                    currentEpisode={episodeId}
+                    onEpisodeClick={setEpisodeId}
+                    totalEpisodes={totalEpisodes}
+                  />
+                )}
+              </div>
+
               {/* Info Section */}
               <div className="bg-[#141414] rounded-xl p-4 lg:p-6 shadow-lg border border-white/5">
                 <div className="flex gap-4 sm:gap-6 flex-col sm:flex-row">