fix(ui): fix minor ui bugs

src/pages/student/Lessons.tsx

@@ -101,12 +101,12 @@ export const Lessons = () => {
               )}
 
               {!lessonLoading && lessons.length > 0 && (
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="grid grid-cols-1 gap-4">
                   {lessons.map((lesson) => (
                     <Card
                       key={lesson.id}
                       onClick={() => handleLessonClick(lesson.id)}
-                      className="py-0 pb-5 rounded-4xl overflow-hidden"
+                      className="py-0  pb-5 rounded-4xl overflow-hidden"
                     >
                       <CardHeader className="w-full py-0 px-0">
                         <img

src/pages/student/Practice.tsx

@@ -24,10 +24,9 @@ export const Practice = () => {
   const navigate = useNavigate();
 
   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">
+    <div className="px-8 py-8 space-y-4">
-      <header className="flex justify-between items-center">
+      <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" />
         </div>
@@ -136,6 +135,6 @@ export const Practice = () => {
           </Card>
         </div>
       </section>
-    </main>
+    </div>
   );
 };

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 mx-auto p-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">
+    <div className="relative flex flex-col gap-8  items-start mx-auto 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 ? (
@@ -295,7 +295,7 @@ export const Rewards = () => {
           </TabsContent>
         </Tabs>
       </section>
-      <Card className="fixed bottom-19 bg-linear-to-br from-purple-500 to-purple-600 w-full rounded-full py-4">
+      <Card className="absolute mx-auto w-full left-0 md:-bottom-12 bottom-0 bg-linear-to-br from-purple-500 to-purple-600 rounded-full py-4">
         <CardContent className="flex justify-between items-center">
           {loading ? (
             <div className="flex justify-between items-center animate-pulse w-full">
@@ -353,6 +353,6 @@ export const Rewards = () => {
           )}
         </CardContent>
       </Card>
-    </main>
+    </div>
   );
 };

src/pages/student/StudentLayout.tsx

@@ -14,10 +14,10 @@ export function StudentLayout() {
 
   return (
     <SidebarProvider>
-      <div className="min-h-screen flex">
+      <div className="min-h-screen flex w-full overflow-x-hidden">
         {/* Desktop Sidebar */}
         <AppSidebar />
-        <main className="flex-1">
+        <main className="flex-1 pb-20 ">
           <SidebarTrigger className="hidden md:block" />
           <Outlet />
         </main>

src/pages/student/practice/Pretest.tsx

@@ -13,7 +13,6 @@ import {
 import { Button } from "../../../components/ui/button";
 import { useNavigate } from "react-router-dom";
 import { useExamConfigStore } from "../../../stores/useExamConfigStore";
-import { useSatExam } from "../../../stores/useSatExam";
 
 export const Pretest = () => {
   const { setSheetId, setMode, storeDuration, setQuestionCount } =
@@ -76,7 +75,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">
+    <div className="p-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">
@@ -120,8 +119,8 @@ export const Pretest = () => {
           </div>
         </section>
       )}
-      <Carousel setApi={setCarouselApi}>
+      <Carousel className="" setApi={setCarouselApi}>
-        <CarouselContent className="">
+        <CarouselContent>
           {practiceSheet ? (
             practiceSheet.modules.length > 0 ? (
               practiceSheet.modules.map((module, index) => (
@@ -133,7 +132,7 @@ export const Pretest = () => {
                     <p className="text-lg font-satoshi text-gray-700">
                       {module.title}
                     </p>
-                    <section className="flex justify-between">
+                    <section className="grid grid-cols-3 gap-6 sm:grid-cols-3">
                       <div className="flex flex-col justify-center items-center gap-4">
                         <div className="w-fit bg-cyan-100 p-2 rounded-full">
                           <Clock size={30} color="oklch(60.9% 0.126 221.723)" />
@@ -228,6 +227,6 @@ export const Pretest = () => {
           </div>
         )}
       </Button>
-    </main>
+    </div>
   );
 };

src/pages/student/practice/Test.tsx

@@ -411,9 +411,9 @@ export const Test = () => {
               </header>
             </section>
             <div className="border border-purple-300"></div>
-            <section className="flex">
+            <section className="flex flex-col md:flex-row space-y-6">
               {currentQuestion?.context && (
-                <section className="h-100 w-1/2 overflow-y-auto px-10 pt-30">
+                <section className="h-100 overflow-y-auto px-10 pt-32">
                   <p className="font-satoshi tracking-wide text-lg">
                     {renderQuestionText(currentQuestion?.context)}
                   </p>
@@ -422,7 +422,7 @@ export const Test = () => {
 
               <div className="border border-purple-200 h-full"></div>
               <section
-                className={`w-1/2 px-10 ${currentQuestion?.context ? "" : "pt-26"}`}
+                className={`px-10 ${currentQuestion?.context ? "" : "pt-26"}`}
               >
                 <p className="font-satoshi-medium text-xl">
                   {currentQuestion?.text &&