fix(ui): fix minor ui bugs

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}>
-        <CarouselContent className="">
+      <Carousel className="" setApi={setCarouselApi}>
+        <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>
   );
 };