From 3462d2f251c8c61c2093cf51bb13d87840fe772c Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 26 Feb 2026 15:06:30 +0530
Subject: [PATCH] fix: misc ui issues

---
 .../src/components/UpcomingEvaluations.vue    |   4 +-
 .../src/pages/Courses/CourseDashboard.vue     |   2 +-
 frontend/src/pages/Home/AdminHome.vue         | 214 +++++++++---------
 frontend/src/pages/Lesson.vue                 |   2 +-
 4 files changed, 111 insertions(+), 111 deletions(-)

diff --git a/frontend/src/components/UpcomingEvaluations.vue b/frontend/src/components/UpcomingEvaluations.vue
index d9cf0407..9f1c3dc2 100644
--- a/frontend/src/components/UpcomingEvaluations.vue
+++ b/frontend/src/components/UpcomingEvaluations.vue
@@ -83,13 +83,13 @@
 								</transition>
 							</Menu>
 						</div>
-						<div class="flex items-center mb-2">
+						<div class="flex items-center mb-3">
 							<Calendar class="w-4 h-4 stroke-1.5" />
 							<span class="ml-2">
 								{{ dayjs(evl.date).format('DD MMMM YYYY') }}
 							</span>
 						</div>
-						<div class="flex items-center mb-2">
+						<div class="flex items-center mb-3">
 							<Clock class="w-4 h-4 stroke-1.5" />
 							<span class="ml-2">
 								{{ formatTime(evl.start_time) }}
diff --git a/frontend/src/pages/Courses/CourseDashboard.vue b/frontend/src/pages/Courses/CourseDashboard.vue
index d8c95284..a989768e 100644
--- a/frontend/src/pages/Courses/CourseDashboard.vue
+++ b/frontend/src/pages/Courses/CourseDashboard.vue
@@ -214,7 +214,7 @@
 						/>
 					</div>
 					<div
-						class="divide-y max-h-[43vh divide-outline-gray-modals text-ink-gray-7 overflow-y-auto"
+						class="divide-y max-h-[40vh] divide-outline-gray-modals text-ink-gray-7 overflow-y-auto"
 					>
 						<div
 							v-for="progress in lessonProgress.data"
diff --git a/frontend/src/pages/Home/AdminHome.vue b/frontend/src/pages/Home/AdminHome.vue
index 8bb3af34..64bee64b 100644
--- a/frontend/src/pages/Home/AdminHome.vue
+++ b/frontend/src/pages/Home/AdminHome.vue
@@ -1,5 +1,112 @@
 <template>
 	<div>
+		<div class="mt-10 space-y-10">
+			<div v-if="evals?.data?.length">
+				<div class="font-semibold text-lg text-ink-gray-9 mb-3">
+					{{ __('Upcoming Evaluations') }}
+				</div>
+				<div class="grid grid-cols-1 md:grid-cols-4 gap-5">
+					<div
+						v-for="evaluation in evals?.data"
+						class="border hover:border-outline-gray-3 rounded-md p-3 flex flex-col h-full cursor-pointer"
+						@click="redirectToProfile()"
+					>
+						<div class="font-semibold text-ink-gray-9 text-lg leading-5 mb-3">
+							{{ evaluation.course_title }}
+						</div>
+						<div class="text-ink-gray-7">
+							<div class="flex items-center mb-3">
+								<Calendar class="w-4 h-4 stroke-1.5" />
+								<span class="ml-2">
+									{{ dayjs(evaluation.date).format('DD MMMM YYYY') }}
+								</span>
+							</div>
+							<div class="flex items-center mb-3">
+								<Clock class="w-4 h-4 stroke-1.5" />
+								<span class="ml-2">
+									{{ formatTime(evaluation.start_time) }}
+								</span>
+							</div>
+							<div class="flex items-center">
+								<GraduationCap class="w-4 h-4 stroke-1.5" />
+								<span class="ml-2">
+									{{ evaluation.member_name }}
+								</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div v-if="liveClasses?.data?.length">
+				<div class="font-semibold text-lg text-ink-gray-9 mb-3">
+					{{ __('Upcoming Live Classes') }}
+				</div>
+				<div class="grid grid-cols-1 md:grid-cols-4 gap-5">
+					<div
+						v-for="cls in liveClasses?.data"
+						class="border hover:border-outline-gray-3 rounded-md p-3"
+					>
+						<div class="font-semibold text-ink-gray-9 text-lg leading-5 mb-1">
+							{{ cls.title }}
+						</div>
+						<div class="text-ink-gray-7 leading-5 mb-4">
+							{{ cls.description }}
+						</div>
+						<div class="mt-auto space-y-3 text-ink-gray-7">
+							<div class="flex items-center space-x-2">
+								<Calendar class="w-4 h-4 stroke-1.5" />
+								<span>
+									{{ dayjs(cls.date).format('DD MMMM YYYY') }}
+								</span>
+							</div>
+							<div class="flex items-center space-x-2">
+								<Clock class="w-4 h-4 stroke-1.5" />
+								<span>
+									{{ formatTime(cls.time) }} -
+									{{ dayjs(getClassEnd(cls)).format('HH:mm A') }}
+								</span>
+							</div>
+							<div
+								v-if="canAccessClass(cls)"
+								class="flex items-center space-x-2 text-ink-gray-9 mt-auto"
+							>
+								<a
+									v-if="user.data?.is_moderator || user.data?.is_evaluator"
+									:href="cls.start_url"
+									target="_blank"
+									class="cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
+									:class="cls.join_url ? 'w-full' : 'w-1/2'"
+								>
+									<Monitor class="h-4 w-4 stroke-1.5" />
+									{{ __('Start') }}
+								</a>
+								<a
+									:href="cls.join_url"
+									target="_blank"
+									class="w-full cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
+								>
+									<Video class="h-4 w-4 stroke-1.5" />
+									{{ __('Join') }}
+								</a>
+							</div>
+							<Tooltip
+								v-else-if="hasClassEnded(cls)"
+								:text="__('This class has ended')"
+								placement="right"
+							>
+								<div class="flex items-center space-x-2 text-ink-amber-3 w-fit">
+									<Info class="w-4 h-4 stroke-1.5" />
+									<span>
+										{{ __('Ended') }}
+									</span>
+								</div>
+							</Tooltip>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
 		<div v-if="createdCourses.data?.length" class="mt-10">
 			<div class="flex items-center justify-between mb-3">
 				<span class="font-semibold text-lg text-ink-gray-9">
@@ -85,113 +192,6 @@
 				</Button>
 			</router-link>
 		</div>
-
-		<div class="grid grid-cols-2 gap-5 mt-10">
-			<div v-if="evals?.data?.length">
-				<div class="font-semibold text-lg text-ink-gray-9 mb-3">
-					{{ __('Upcoming Evaluations') }}
-				</div>
-				<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
-					<div
-						v-for="evaluation in evals?.data"
-						class="border hover:border-outline-gray-3 rounded-md p-3 flex flex-col h-full cursor-pointer"
-						@click="redirectToProfile()"
-					>
-						<div class="font-semibold text-ink-gray-9 text-lg leading-5 mb-1">
-							{{ evaluation.course_title }}
-						</div>
-						<div class="text-ink-gray-7 text-sm">
-							<div class="flex items-center mb-2">
-								<Calendar class="w-4 h-4 stroke-1.5" />
-								<span class="ml-2">
-									{{ dayjs(evaluation.date).format('DD MMMM YYYY') }}
-								</span>
-							</div>
-							<div class="flex items-center mb-2">
-								<Clock class="w-4 h-4 stroke-1.5" />
-								<span class="ml-2">
-									{{ formatTime(evaluation.start_time) }}
-								</span>
-							</div>
-							<div class="flex items-center">
-								<GraduationCap class="w-4 h-4 stroke-1.5" />
-								<span class="ml-2">
-									{{ evaluation.member_name }}
-								</span>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div v-if="liveClasses?.data?.length">
-				<div class="font-semibold text-lg text-ink-gray-9 mb-3">
-					{{ __('Upcoming Live Classes') }}
-				</div>
-				<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
-					<div
-						v-for="cls in liveClasses?.data"
-						class="border hover:border-outline-gray-3 rounded-md p-3"
-					>
-						<div class="font-semibold text-ink-gray-9 text-lg leading-5 mb-1">
-							{{ cls.title }}
-						</div>
-						<div class="text-ink-gray-7 text-sm leading-5 mb-4">
-							{{ cls.description }}
-						</div>
-						<div class="mt-auto space-y-3 text-ink-gray-7 text-sm">
-							<div class="flex items-center space-x-2">
-								<Calendar class="w-4 h-4 stroke-1.5" />
-								<span>
-									{{ dayjs(cls.date).format('DD MMMM YYYY') }}
-								</span>
-							</div>
-							<div class="flex items-center space-x-2">
-								<Clock class="w-4 h-4 stroke-1.5" />
-								<span>
-									{{ formatTime(cls.time) }} -
-									{{ dayjs(getClassEnd(cls)).format('HH:mm A') }}
-								</span>
-							</div>
-							<div
-								v-if="canAccessClass(cls)"
-								class="flex items-center space-x-2 text-ink-gray-9 mt-auto"
-							>
-								<a
-									v-if="user.data?.is_moderator || user.data?.is_evaluator"
-									:href="cls.start_url"
-									target="_blank"
-									class="cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
-									:class="cls.join_url ? 'w-full' : 'w-1/2'"
-								>
-									<Monitor class="h-4 w-4 stroke-1.5" />
-									{{ __('Start') }}
-								</a>
-								<a
-									:href="cls.join_url"
-									target="_blank"
-									class="w-full cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
-								>
-									<Video class="h-4 w-4 stroke-1.5" />
-									{{ __('Join') }}
-								</a>
-							</div>
-							<Tooltip
-								v-else-if="hasClassEnded(cls)"
-								:text="__('This class has ended')"
-								placement="right"
-							>
-								<div class="flex items-center space-x-2 text-ink-amber-3 w-fit">
-									<Info class="w-4 h-4 stroke-1.5" />
-									<span>
-										{{ __('Ended') }}
-									</span>
-								</div>
-							</Tooltip>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
 	</div>
 </template>
 <script setup lang="ts">
diff --git a/frontend/src/pages/Lesson.vue b/frontend/src/pages/Lesson.vue
index 5bf85fb7..81aadeb7 100644
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -293,7 +293,7 @@
 				</div>
 			</div>
 			<div class="sticky top-10">
-				<div class="bg-surface-menu-bar py-5 px-2 border-b">
+				<div class="bg-surface-menu-bar p-5 border-b">
 					<div class="text-lg font-semibold text-ink-gray-9">
 						{{ lesson.data.course_title }}
 					</div>