fix(ui): fix minor ui bugs

src/components/AppSidebar.tsx

@@ -26,9 +26,12 @@ import {
 import { useState } from "react";
 import logo from "../assets/ed_logo1.png";
 import { NavLink } from "react-router-dom";
+import { useAuthStore } from "../stores/authStore";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 
 export function AppSidebar() {
   const [open, setOpen] = useState(true);
+  const user = useAuthStore((s) => s.user);
 
   return (
     <Sidebar className="border-r bg-black text-white">
@@ -195,13 +198,15 @@ export function AppSidebar() {
       {/* FOOTER */}
       <SidebarFooter>
         <div className="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-white/10 cursor-pointer">
-          <img
-            src="https://i.pravatar.cc/40"
-            className="w-8 h-8 rounded-full"
-          />
+          <Avatar>
+            <AvatarImage src={user?.avatar_url} />
+            <AvatarFallback className="font-satoshi-bold bg-linear-to-br from-purple-400 to-purple-500 uppercase">
+              {user?.name.slice(0, 1)}
+            </AvatarFallback>
+          </Avatar>
           <div className="flex flex-col text-sm">
-            <span className="font-medium text-black">shadcn</span>
-            <span className="text-xs text-gray-400">m@example.com</span>
+            <span className="font-medium text-black">{user?.name}</span>
+            <span className="text-xs text-gray-400">{user?.email}</span>
           </div>
           <ChevronDown size={16} className="ml-auto" />
         </div>

src/pages/student/Home.tsx

@@ -84,7 +84,7 @@ export const Home = () => {
   };
 
   return (
-    <main className="min-h-screen bg-gray-50 space-y-6 max-w-full mx-auto px-8 sm:px-6 lg:px-90 py-12">
+    <main className="min-h-screen bg-gray-50 space-y-6  mx-auto px-8 sm:px-6 lg:px-90 py-12">
       <h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
         Welcome, {user?.name || "Student"}
       </h1>

src/pages/student/StudentLayout.tsx

@@ -14,7 +14,7 @@ export function StudentLayout() {
 
   return (
     <SidebarProvider>
-      <div className="min-h-screen flex w-full">
+      <div className="min-h-screen flex">
         {/* Desktop Sidebar */}
         <AppSidebar />
         <main className="flex-1">

src/pages/student/practice/Test.tsx

@@ -237,7 +237,7 @@ export const Test = () => {
     if (question.options && question.options.length > 0) {
       const eliminatedSet = eliminated[question.id] ?? new Set();
       return (
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4 w-full">
           {question.options.map((option, index) => {
             const isSelected = currentAnswer === option.id;
             const isEliminated = eliminatedSet.has(option.id);
@@ -245,7 +245,7 @@ export const Test = () => {
             return (
               <div
                 key={option.id}
-                className={`flex flex-row-reverse  items-center gap-4 transition 
+                className={`flex flex-row-reverse items-center gap-4  
              
             `}
               >
@@ -407,29 +407,29 @@ export const Test = () => {
                 <h1 className="text-lg text-center font-satoshi">
                   {currentModule?.module_title}
                 </h1>
-                {/* <p className="text-sm font-satoshi text-gray-500">
-                {practiceSheet?.modules[0].description}
-              </p> */}
+                <p className="text-sm font-satoshi text-gray-500"></p>
               </header>
             </section>
             <div className="border border-purple-300"></div>
+            <section className="flex">
               {currentQuestion?.context && (
-              <section className="h-100 overflow-y-auto px-10 pt-30">
+                <section className="h-100 w-1/2 overflow-y-auto px-10 pt-30">
                   <p className="font-satoshi tracking-wide text-lg">
                     {renderQuestionText(currentQuestion?.context)}
                   </p>
                 </section>
               )}
 
-            <div className="border border-purple-200"></div>
+              <div className="border border-purple-200 h-full"></div>
               <section
-              className={`px-10 ${currentQuestion?.context ? "" : "pt-26"}`}
+                className={`w-1/2 px-10 ${currentQuestion?.context ? "" : "pt-26"}`}
               >
                 <p className="font-satoshi-medium text-xl">
                   {currentQuestion?.text &&
                     renderQuestionText(currentQuestion.text)}
                 </p>
               </section>
+            </section>
             <section className="overflow-y-auto max-h-100 md:max-h-fit px-10 pb-20">
               {renderAnswerInput(currentQuestion)}
             </section>