From 850f34e53e5a50a886db24eae8c473e8ecbaeda7 Mon Sep 17 00:00:00 2001
From: Tejas Panchal <tejaspanchal127@gmail.com>
Date: Fri, 1 Aug 2025 22:35:59 +0530
Subject: [PATCH] fix padding

---
 src/pages/animeInfo/AnimeInfo.jsx | 8 ++++----
 src/pages/category/Category.jsx   | 2 +-
 src/pages/contact/Contact.jsx     | 2 +-
 src/pages/watch/Watch.jsx         | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/animeInfo/AnimeInfo.jsx b/src/pages/animeInfo/AnimeInfo.jsx
index ac1e45d..0e74ba4 100644
--- a/src/pages/animeInfo/AnimeInfo.jsx
+++ b/src/pages/animeInfo/AnimeInfo.jsx
@@ -156,7 +156,7 @@ function AnimeInfo({ random = false }) {
       <div className="relative w-full overflow-hidden mt-[74px] max-md:mt-[60px]">
 
         {/* Main Content */}
-        <div className="relative z-10 container mx-auto px-3 sm:px-4 py-4 sm:py-6 lg:py-12">
+        <div className="relative z-10 container mx-auto px-3 sm:px-4 py-4 sm:py-6 lg:py-12 max-[478px]:px-2">
           {/* Mobile Layout */}
           <div className="block md:hidden">
             <div className="flex flex-row gap-4">
@@ -447,7 +447,7 @@ function AnimeInfo({ random = false }) {
 
       {/* Seasons Section */}
       {seasons?.length > 0 && (
-        <div className="container mx-auto px-3 py-8 sm:px-4 sm:py-12">
+        <div className="container mx-auto px-3 py-8 sm:px-4 sm:py-12 max-[478px]:px-2">
           <h2 className="text-2xl font-bold mb-6 sm:mb-8 px-1">More Seasons</h2>
           <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4">
             {seasons.map((season, index) => (
@@ -501,14 +501,14 @@ function AnimeInfo({ random = false }) {
 
       {/* Voice Actors Section */}
       {animeInfo?.charactersVoiceActors.length > 0 && (
-        <div className="container mx-auto px-4 py-12">
+        <div className="container mx-auto px-4 py-12 max-[478px]:px-2">
           <Voiceactor animeInfo={animeInfo} />
         </div>
       )}
 
       {/* Recommendations Section */}
       {animeInfo.recommended_data.length > 0 && (
-        <div className="container mx-auto px-4 py-12">
+        <div className="container mx-auto px-4 py-12 max-[478px]:px-2">
           <CategoryCard
             label="Recommended for you"
             data={animeInfo.recommended_data}
diff --git a/src/pages/category/Category.jsx b/src/pages/category/Category.jsx
index 2ee67fb..f16f80e 100644
--- a/src/pages/category/Category.jsx
+++ b/src/pages/category/Category.jsx
@@ -52,7 +52,7 @@ function Category({ path, label }) {
   return (
     <div className="w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]">
       {categoryInfo ? (
-        <div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10">
+        <div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10 max-[478px]:px-2">
           {page > totalPages ? (
             <p className="font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px] max-[300px]:leading-6">
               You came a long way, go back <br className="max-[300px]:hidden" />
diff --git a/src/pages/contact/Contact.jsx b/src/pages/contact/Contact.jsx
index b24d014..541aebd 100644
--- a/src/pages/contact/Contact.jsx
+++ b/src/pages/contact/Contact.jsx
@@ -6,7 +6,7 @@ import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 
 function Contact() {
   return (
-    <div className="max-w-4xl mx-auto px-4 py-8">
+    <div className="max-w-4xl mx-auto px-4 py-8 max-[478px]:px-2">
       <h1 className="text-2xl font-bold mb-6">Contact Us</h1>
       <div className="space-y-8 text-white/60">
         <p>
diff --git a/src/pages/watch/Watch.jsx b/src/pages/watch/Watch.jsx
index c5b88cc..53ec986 100644
--- a/src/pages/watch/Watch.jsx
+++ b/src/pages/watch/Watch.jsx
@@ -223,10 +223,10 @@ 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 pt-16 px-4 pb-6 w-full max-[1200px]:px-0">
+      <div className="w-full max-w-[1920px] mx-auto pt-16 px-4 pb-6 w-full max-[1200px]:px-0 max-[1200px]:pt-12">
         <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">
+          <div className="flex flex-col w-full gap-6 max-[1200px]:px-2">
             <div ref={playerRef} className="player w-full h-fit bg-black flex flex-col rounded-xl overflow-hidden">
               {/* Video Container */}
               <div ref={videoContainerRef} className="w-full relative aspect-video bg-black">