From b56642fda8507e028eb0278d92914739ec1a6a78 Mon Sep 17 00:00:00 2001
From: shafin-r <shafin808s@gmail.com>
Date: Sun, 15 Feb 2026 18:37:28 +0600
Subject: [PATCH] fix(ui): fix minor ui bugs

---
 src/components/AppSidebar.tsx       | 17 ++++++++-----
 src/pages/student/Home.tsx          |  2 +-
 src/pages/student/StudentLayout.tsx |  2 +-
 src/pages/student/practice/Test.tsx | 38 ++++++++++++++---------------
 4 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index 3b34fe2..2167cb6 100644
--- a/src/components/AppSidebar.tsx
+++ b/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>
diff --git a/src/pages/student/Home.tsx b/src/pages/student/Home.tsx
index 81c3f0f..9fd7a0c 100644
--- a/src/pages/student/Home.tsx
+++ b/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>
diff --git a/src/pages/student/StudentLayout.tsx b/src/pages/student/StudentLayout.tsx
index 11b81d4..a641dca 100644
--- a/src/pages/student/StudentLayout.tsx
+++ b/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">
diff --git a/src/pages/student/practice/Test.tsx b/src/pages/student/practice/Test.tsx
index d963987..b92bc35 100644
--- a/src/pages/student/practice/Test.tsx
+++ b/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,28 +407,28 @@ 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>
-            {currentQuestion?.context && (
-              <section className="h-100 overflow-y-auto px-10 pt-30">
-                <p className="font-satoshi tracking-wide text-lg">
-                  {renderQuestionText(currentQuestion?.context)}
+            <section className="flex">
+              {currentQuestion?.context && (
+                <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 h-full"></div>
+              <section
+                className={`w-1/2 px-10 ${currentQuestion?.context ? "" : "pt-26"}`}
+              >
+                <p className="font-satoshi-medium text-xl">
+                  {currentQuestion?.text &&
+                    renderQuestionText(currentQuestion.text)}
                 </p>
               </section>
-            )}
-
-            <div className="border border-purple-200"></div>
-            <section
-              className={`px-10 ${currentQuestion?.context ? "" : "pt-26"}`}
-            >
-              <p className="font-satoshi-medium text-xl">
-                {currentQuestion?.text &&
-                  renderQuestionText(currentQuestion.text)}
-              </p>
             </section>
             <section className="overflow-y-auto max-h-100 md:max-h-fit px-10 pb-20">
               {renderAnswerInput(currentQuestion)}