initial responsive rendering

src/pages/student/Analytics.tsx

@@ -11,7 +11,7 @@ import { Progress } from "../../components/ui/progress";
 
 export const Analytics = () => {
   return (
-    <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
+    <main className="min-h-screen max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
       <h1 className="font-satoshi-bold text-3xl text-center tracking-tight">
         Analytics
       </h1>

src/pages/student/Home.tsx

@@ -84,7 +84,7 @@ export const Home = () => {
   };
 
   return (
-    <main className="min-h-screen bg-gray-50 space-y-6  mx-auto px-8 sm:px-6 lg:px-90 py-12">
+    <main className="min-h-screen bg-gray-50 space-y-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
       <h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
         Welcome, {user?.name || "Student"}
       </h1>
@@ -179,7 +179,7 @@ export const Home = () => {
             </TabsTrigger>
           </TabsList>
           <TabsContent value="all" className="pt-6">
-            <div className="gap-6 flex flex-col md:grid md:grid-cols-2">
+            <div className="gap-6 flex flex-col md:grid md:grid-cols-3 lg:grid-cols-4">
               {practiceSheets.length > 0 ? (
                 practiceSheets.map((sheet) => (
                   <Card key={sheet?.id} className="rounded-4xl">
@@ -228,7 +228,7 @@ export const Home = () => {
             </div>
           </TabsContent>
           <TabsContent value="NOT_STARTED" className="pt-6">
-            <div className="gap-6 flex flex-col md:grid md:grid-cols-2">
+            <div className="gap-6 flex flex-col md:grid md:grid-cols-3 lg:grid-cols-4">
               {notStartedSheets.map((sheet) => (
                 <Card key={sheet?.id} className="rounded-4xl">
                   <CardHeader>
@@ -266,7 +266,7 @@ export const Home = () => {
             </div>
           </TabsContent>
           <TabsContent value="COMPLETED" className="pt-6">
-            <div className="gap-6 flex flex-col md:grid md:grid-cols-2">
+            <div className="gap-6 flex flex-col md:grid md:grid-cols-3 lg:grid-cols-4">
               {completedSheets.length > 0 ? (
                 completedSheets.map((sheet) => (
                   <Card key={sheet?.id} className="rounded-4xl">

src/pages/student/Lessons.tsx

@@ -61,7 +61,7 @@ export const Lessons = () => {
   }, [user]);
 
   return (
-    <main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8">
+    <main className="min-h-screen space-y-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <header className="space-y-2">
         <h1 className="font-satoshi-black text-2xl">Lessons</h1>
         <p className="font-satoshi-medium text-sm text-gray-500">

src/pages/student/Practice.tsx

@@ -26,7 +26,7 @@ export const Practice = () => {
   const userXp = useExamConfigStore.getState().userXp;
   console.log(userXp);
   return (
-    <main className="h-fit max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
+    <main className="h-fit max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
       <header className="flex justify-between items-center">
         <div className="w-fit bg-linear-to-br from-purple-500 to-purple-600 p-3 rounded-2xl">
           <BookOpen size={20} color="white" />

src/pages/student/Profile.tsx

@@ -12,7 +12,7 @@ export const Profile = () => {
   };
 
   return (
-    <main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 md:px-26 lg:px-8 py-8">
+    <main className="min-h-screen space-y-6 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <h1 className="text-lg font-satoshi-bold text-center">Profile</h1>
       <section>
         <h3 className="text-2xl font-satoshi-bold">{user?.name}</h3>

src/pages/student/Rewards.tsx

@@ -84,7 +84,7 @@ export const Rewards = () => {
   const isTopThree = (leaderboard?.user_rank?.rank ?? Infinity) < 3;
 
   return (
-    <main className="flex flex-col gap-8  items-start mx-auto sm:px-6 lg:px-8 py-8">
+    <main className="flex flex-col gap-8 items-start max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <header className="flex flex-col items-center h-fit w-full  gap-3">
         <h1 className="font-satoshi-black text-3xl">Leaderboards</h1>
         {loading ? (

src/pages/student/drills/page.tsx

@@ -72,7 +72,7 @@ export const Drills = () => {
   }, [user]);
 
   return (
-    <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
+    <main className="min-h-screen max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
       <header className="space-y-2">
         <h1 className="font-satoshi-bold text-3xl">Drills</h1>
         <p className="font-satoshi text-md text-gray-500">

src/pages/student/hard-test-modules/page.tsx

@@ -30,7 +30,7 @@ export const HardTestModules = () => {
     navigate(`/student/practice/${selected}/test`, { replace: true });
   }
   return (
-    <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
+    <main className="min-h-screen max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
       <header className="space-y-2">
         <h1 className="font-satoshi-bold text-3xl">Hard Test Modules</h1>
         <p className="font-satoshi text-md text-gray-500">

src/pages/student/practice/Pretest.tsx

@@ -73,7 +73,7 @@ export const Pretest = () => {
   }, [carouselApi]);
 
   return (
-    <main className="max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-6">
+    <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
       <header className="space-y-2">
         <h1 className="text-4xl font-satoshi-bold">{practiceSheet?.title}</h1>
         <p className="text-lg font-satoshi text-gray-700">

src/pages/student/practice/Results.tsx

@@ -91,7 +91,7 @@ export const Results = () => {
   const previousXP = results ? results.total_xp - results.xp_gained : 0;
 
   return (
-    <main className="min-h-screen bg-gray-50 space-y-6 mx-auto px-8 sm:px-6 lg:px-90 py-10">
+    <main className="min-h-screen bg-gray-50 space-y-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
       <header className="flex gap-4">
         <button
           onClick={() => handleFinishExam()}

src/pages/student/targeted-practice/page.tsx

@@ -90,7 +90,7 @@ export const TargetedPractice = () => {
   }, [user]);
 
   return (
-    <main className="relative min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
+    <main className="relative min-h-screen max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
       <header className="space-y-2">
         <h1 className="font-satoshi-bold text-3xl">Targeted Practice</h1>
         <p className="font-satoshi text-md text-gray-500">