refactor(ads): remove unnecessary hidden class and add desktop-only rendering for vertical banners to improve responsiveness and clarity

src/components/ads/VerticalAdBanner.tsx

@@ -30,7 +30,7 @@ export function VerticalAdBanner({ adSlot, ezoicPlacementId, position = "left" }
 
   return (
     <AdWrapper>
-      <div className="hidden lg:block w-[160px] h-[600px] sticky top-4">
+      <div className="w-[160px] h-[600px] sticky top-4">
         {isDevelopment ? (
           <AdPlaceholder height="600px" type={`Vertical Ad (${position})`} width="160px" />
         ) : useEzoic ? (

src/components/ads/VerticalLeftBanner.tsx

@@ -1,8 +1,22 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
 import { VerticalAdBanner } from "./VerticalAdBanner";
 
 import { env } from "@/env";
 
 export function VerticalLeftBanner() {
+  const [isDesktop, setIsDesktop] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(min-width: 1024px)");
+    setIsDesktop(mq.matches);
+    const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+
   const isCustom = env.NEXT_PUBLIC_AD_PROVIDER === "custom";
   const hasAdSlot = env.NEXT_PUBLIC_VERTICAL_LEFT_BANNER_AD_SLOT;
   const hasEzoicPlacement = env.NEXT_PUBLIC_EZOIC_VERTICAL_LEFT_PLACEMENT_ID;
@@ -11,6 +25,10 @@ export function VerticalLeftBanner() {
     return null;
   }
 
+  if (!isDesktop) {
+    return null;
+  }
+
   return (
     <VerticalAdBanner
       adSlot={env.NEXT_PUBLIC_VERTICAL_LEFT_BANNER_AD_SLOT || ""}

src/components/ads/VerticalRightBanner.tsx

@@ -1,8 +1,22 @@
-import { env } from "@/env";
+"use client";
+
+import { useState, useEffect } from "react";
 
 import { VerticalAdBanner } from "./VerticalAdBanner";
 
+import { env } from "@/env";
+
 export function VerticalRightBanner() {
+  const [isDesktop, setIsDesktop] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(min-width: 1024px)");
+    setIsDesktop(mq.matches);
+    const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+
   const isCustom = env.NEXT_PUBLIC_AD_PROVIDER === "custom";
   const hasAdSlot = env.NEXT_PUBLIC_VERTICAL_RIGHT_BANNER_AD_SLOT;
   const hasEzoicPlacement = env.NEXT_PUBLIC_EZOIC_VERTICAL_RIGHT_PLACEMENT_ID;
@@ -11,6 +25,10 @@ export function VerticalRightBanner() {
     return null;
   }
 
+  if (!isDesktop) {
+    return null;
+  }
+
   return (
     <VerticalAdBanner
       adSlot={env.NEXT_PUBLIC_VERTICAL_RIGHT_BANNER_AD_SLOT || ""}