From e6d3819092509f856d43e44a042526464c9d7253 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 28 Mar 2024 11:30:59 +0530
Subject: [PATCH] feat: mobile responsive

---
 frontend/src/components/Annoucements.vue  |   2 +-
 frontend/src/components/AppSidebar.vue    |   5 +-
 frontend/src/components/BatchCard.vue     |   2 +-
 frontend/src/components/CourseCard.vue    |   6 +-
 frontend/src/components/CourseOutline.vue |   2 +-
 frontend/src/components/DesktopLayout.vue |  28 ++--
 frontend/src/components/JobCard.vue       |   2 +-
 frontend/src/components/MobileLayout.vue  |  41 +++--
 frontend/src/components/SidebarLink.vue   |  31 ++--
 frontend/src/pages/Batch.vue              |   4 +-
 frontend/src/pages/BatchCreation.vue      |   2 +-
 frontend/src/pages/BatchDetail.vue        |   4 +-
 frontend/src/pages/Batches.vue            |   4 +-
 frontend/src/pages/Billing.vue            |   2 +-
 frontend/src/pages/CourseDetail.vue       |   9 +-
 frontend/src/pages/Courses.vue            | 194 +++++++++++-----------
 frontend/src/pages/CreateCourse.vue       |   4 +-
 frontend/src/pages/CreateLesson.vue       |   4 +-
 frontend/src/pages/JobCreation.vue        |   2 +-
 frontend/src/pages/JobDetail.vue          |   2 +-
 frontend/src/pages/Jobs.vue               |   4 +-
 frontend/src/pages/Lesson.vue             |  17 +-
 frontend/src/pages/Statistics.vue         |   6 +-
 lms/lms/utils.py                          |   8 +-
 24 files changed, 198 insertions(+), 187 deletions(-)

diff --git a/frontend/src/components/Annoucements.vue b/frontend/src/components/Annoucements.vue
index f075c740..13eb0fb6 100644
--- a/frontend/src/components/Annoucements.vue
+++ b/frontend/src/components/Annoucements.vue
@@ -55,7 +55,7 @@ const communications = createListResource({
 	cache: ['batch', props.batch],
 })
 </script>
-<style>
+<style scoped>
 .prose-sm p {
 	margin: 0 0 0.5rem;
 }
diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 8543620c..386ed715 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -11,10 +11,7 @@
 			<div class="flex flex-col overflow-y-auto">
 				<SidebarLink
 					v-for="link in links"
-					:icon="link.icon"
-					:label="link.label"
-					:to="link.to"
-					:activeFor="link.activeFor"
+					:link="link"
 					:isCollapsed="isSidebarCollapsed"
 					class="mx-2 my-0.5"
 				/>
diff --git a/frontend/src/components/BatchCard.vue b/frontend/src/components/BatchCard.vue
index 071395b5..beee6660 100644
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -61,7 +61,7 @@ const props = defineProps({
 	},
 })
 </script>
-<style>
+<style scoped>
 .short-introduction {
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index 14264a22..6b164094 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -9,8 +9,8 @@
 			:class="{ 'default-image': !course.image }"
 			:style="{ backgroundImage: 'url(' + encodeURI(course.image) + ')' }"
 		>
-			<div class="flex relative top-4 left-4 w-fit">
-				<Badge theme="gray" size="lg" class="mr-2" v-for="tag in course.tags">
+			<div class="flex relative top-4 left-4 w-fit flex-wrap">
+				<Badge theme="gray" size="md" class="mr-2" v-for="tag in course.tags">
 					{{ tag }}
 				</Badge>
 			</div>
@@ -127,7 +127,7 @@ const props = defineProps({
 	},
 })
 </script>
-<style>
+<style scoped>
 .course-image {
 	height: 168px;
 	width: 100%;
diff --git a/frontend/src/components/CourseOutline.vue b/frontend/src/components/CourseOutline.vue
index 070f6909..cb1b0420 100644
--- a/frontend/src/components/CourseOutline.vue
+++ b/frontend/src/components/CourseOutline.vue
@@ -158,7 +158,7 @@ const getCurrentChapter = () => {
 	return currentChapter.value
 }
 </script>
-<style>
+<style scoped>
 .outline-lesson:has(.router-link-active) {
 	background-color: theme('colors.gray.100');
 }
diff --git a/frontend/src/components/DesktopLayout.vue b/frontend/src/components/DesktopLayout.vue
index 8d4a91a1..e4fd1f8c 100644
--- a/frontend/src/components/DesktopLayout.vue
+++ b/frontend/src/components/DesktopLayout.vue
@@ -1,17 +1,19 @@
 <template>
-    <div class="relative flex h-full flex-col">
-        <div class="h-full flex-1">
-            <div class="flex h-full">
-                <div class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto">
-                    <slot name="sidebar" />
-                    <AppSidebar />
-                </div>
-                <div class="w-full overflow-auto" id="scrollContainer">
-                    <slot />
-                </div>
-            </div>
-        </div>
-    </div>
+	<div class="relative flex h-full flex-col">
+		<div class="h-full flex-1">
+			<div class="flex h-screen text-base">
+				<div
+					class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto"
+				>
+					<slot name="sidebar" />
+					<AppSidebar />
+				</div>
+				<div class="w-full overflow-auto" id="scrollContainer">
+					<slot />
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 <script setup>
 import AppSidebar from './AppSidebar.vue'
diff --git a/frontend/src/components/JobCard.vue b/frontend/src/components/JobCard.vue
index 1b4f55fa..5400790e 100644
--- a/frontend/src/components/JobCard.vue
+++ b/frontend/src/components/JobCard.vue
@@ -16,7 +16,7 @@
 			</div>
 			<div class="flex items-center my-4">
 				<Badge :label="job.type" theme="green" size="lg" class="mr-4" />
-				<Badge :label="job.location" theme="gray" size="lg">
+				<Badge :label="job.location.split(' ')[0]" theme="gray" size="lg">
 					<template #prefix>
 						<MapPin class="h-4 w-4 stroke-1.5" />
 					</template>
diff --git a/frontend/src/components/MobileLayout.vue b/frontend/src/components/MobileLayout.vue
index 0d21aa31..51c118d8 100644
--- a/frontend/src/components/MobileLayout.vue
+++ b/frontend/src/components/MobileLayout.vue
@@ -1,20 +1,27 @@
 <template>
 	<div class="flex h-full flex-col">
-		<div class="h-full overflow-auto" id="scrollContainer">
+		<div class="h-full" id="scrollContainer">
 			<slot />
 		</div>
 		<div
 			v-if="tabs"
-			class="grid grid-cols-5 border-t border-gray-300 standalone:pb-4"
-			:style="{ gridTemplateColumns: `repeat(${tabs.length}, minmax(0, 1fr))` }"
+			class="grid grid-cols-5 border-t border-gray-300 sticky bottom-0 z-10 bg-white standalone:pb-4"
+			:style="{
+				gridTemplateColumns: `repeat(${tabs.length - 1}, minmax(0, 1fr))`,
+			}"
 		>
 			<button
 				v-for="tab in tabs"
 				:key="tab.label"
+				:class="isVisible(tab) ? 'block' : 'hidden'"
 				class="flex flex-col items-center justify-center py-3 transition active:scale-95"
 				@click="handleClick(tab)"
 			>
-				<component :is="tab.icon" class="h-6 w-6 stroke-1.5 text-gray-700" />
+				<component
+					:is="tab.icon"
+					class="h-7 w-7 stroke-1.5"
+					:class="[isActive(tab) ? 'text-gray-900' : 'text-gray-600']"
+				/>
 			</button>
 		</div>
 	</div>
@@ -22,19 +29,33 @@
 <script setup>
 import { getSidebarLinks } from '../utils'
 import { useRouter } from 'vue-router'
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
+import { sessionStore } from '@/stores/session'
+
+const { logout, user } = sessionStore()
+let { isLoggedIn } = sessionStore()
 
 const router = useRouter()
 const tabs = computed(() => {
 	return getSidebarLinks()
 })
 
-/* let isActive = computed((tab) => {
-	console.log(tab);
-	return router.currentRoute.value.name === tab.to
-}) */
+let isActive = (tab) => {
+	return tab.activeFor?.includes(router.currentRoute.value.name)
+}
 
 const handleClick = (tab) => {
-	router.push({ name: tab.to })
+	if (tab.label == 'Log in') window.location.href = '/login'
+	else if (tab.label == 'Log out')
+		logout.submit().then(() => {
+			isLoggedIn = false
+		})
+	else router.push({ name: tab.to })
+}
+
+const isVisible = (tab) => {
+	if (tab.label == 'Log in') return !isLoggedIn
+	else if (tab.label == 'Log out') return isLoggedIn
+	else return true
 }
 </script>
diff --git a/frontend/src/components/SidebarLink.vue b/frontend/src/components/SidebarLink.vue
index e54146c5..74a70014 100644
--- a/frontend/src/components/SidebarLink.vue
+++ b/frontend/src/components/SidebarLink.vue
@@ -1,5 +1,6 @@
 <template>
 	<button
+		v-if="link && !link.onlyMobile"
 		class="flex h-7 cursor-pointer items-center rounded text-gray-800 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-gray-400"
 		:class="isActive ? 'bg-white shadow-sm' : 'hover:bg-gray-100'"
 		@click="handleClick"
@@ -8,10 +9,13 @@
 			class="flex items-center duration-300 ease-in-out"
 			:class="isCollapsed ? 'p-1' : 'px-2 py-1'"
 		>
-			<Tooltip :text="label" placement="right">
+			<Tooltip :text="link.label" placement="right">
 				<slot name="icon">
 					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-						<component :is="icon" class="h-5 w-5 stroke-1.5 text-gray-800" />
+						<component
+							:is="link.icon"
+							class="h-5 w-5 stroke-1.5 text-gray-800"
+						/>
 					</span>
 				</slot>
 			</Tooltip>
@@ -23,7 +27,7 @@
 						: 'ml-2 w-auto opacity-100'
 				"
 			>
-				{{ label }}
+				{{ link.label }}
 			</span>
 		</div>
 	</button>
@@ -37,20 +41,9 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 
 const props = defineProps({
-	icon: {
-		type: Function,
-	},
-	label: {
-		type: String,
-		default: '',
-	},
-	to: {
-		type: String,
-		default: '',
-	},
-	activeFor: {
-		type: Array,
-		default: [],
+	link: {
+		type: Object,
+		required: true,
 	},
 	isCollapsed: {
 		type: Boolean,
@@ -59,10 +52,10 @@ const props = defineProps({
 })
 
 function handleClick() {
-	router.push({ name: props.to })
+	router.push({ name: props.link.to })
 }
 
 let isActive = computed(() => {
-	return props.activeFor.includes(router.currentRoute.value.name)
+	return props.link?.activeFor?.includes(router.currentRoute.value.name)
 })
 </script>
diff --git a/frontend/src/pages/Batch.vue b/frontend/src/pages/Batch.vue
index e6454e0a..f6d96508 100644
--- a/frontend/src/pages/Batch.vue
+++ b/frontend/src/pages/Batch.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="user.data?.is_moderator || isStudent" class="h-screen text-base">
+	<div v-if="user.data?.is_moderator || isStudent" class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
@@ -102,7 +102,7 @@
 			/>
 		</div>
 	</div>
-	<div v-else-if="!user.data?.name" class="h-screen">
+	<div v-else-if="!user.data?.name" class="">
 		<div class="text-base border rounded-md w-1/3 mx-auto my-32">
 			<div class="border-b px-5 py-3 font-medium">
 				<span
diff --git a/frontend/src/pages/BatchCreation.vue b/frontend/src/pages/BatchCreation.vue
index 75c367ad..71731e50 100644
--- a/frontend/src/pages/BatchCreation.vue
+++ b/frontend/src/pages/BatchCreation.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="h-screen text-base">
+	<div class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
diff --git a/frontend/src/pages/BatchDetail.vue b/frontend/src/pages/BatchDetail.vue
index 016cbcfa..9294a352 100644
--- a/frontend/src/pages/BatchDetail.vue
+++ b/frontend/src/pages/BatchDetail.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="batch.data" class="h-screen text-base">
+	<div v-if="batch.data" class="">
 		<header class="sticky top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5">
 			<Breadcrumbs :items="breadcrumbs" />
 		</header>
@@ -136,7 +136,7 @@ const breadcrumbs = computed(() => {
 	return items
 })
 </script>
-<style>
+<style scoped>
 .batch-description p {
 	margin-bottom: 1rem;
 	line-height: 1.7;
diff --git a/frontend/src/pages/Batches.vue b/frontend/src/pages/Batches.vue
index faa7f4e3..b4d852d9 100644
--- a/frontend/src/pages/Batches.vue
+++ b/frontend/src/pages/Batches.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="h-screen text-base">
+	<div class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
@@ -58,7 +58,7 @@
 				<template #default="{ tab }">
 					<div
 						v-if="tab.batches && tab.batches.value.length"
-						class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 gap-5 mt-5 mx-5"
+						class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mt-5 mx-5"
 					>
 						<router-link
 							v-for="batch in tab.batches.value"
diff --git a/frontend/src/pages/Billing.vue b/frontend/src/pages/Billing.vue
index 2f86b568..327871c2 100644
--- a/frontend/src/pages/Billing.vue
+++ b/frontend/src/pages/Billing.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="text-base h-screen">
+	<div class="">
 		<div
 			v-if="access.data?.access && orderSummary.data"
 			class="mt-10 w-1/2 mx-auto"
diff --git a/frontend/src/pages/CourseDetail.vue b/frontend/src/pages/CourseDetail.vue
index b3f52710..92ba248c 100644
--- a/frontend/src/pages/CourseDetail.vue
+++ b/frontend/src/pages/CourseDetail.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="course.data" class="h-screen text-base">
+	<div v-if="course.data">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
@@ -7,7 +7,7 @@
 		</header>
 		<div class="m-5">
 			<div class="flex justify-between w-full">
-				<div class="w-2/3">
+				<div class="md:w-2/3">
 					<div class="text-3xl font-semibold">
 						{{ course.data.title }}
 					</div>
@@ -74,6 +74,7 @@
 							{{ tag }}
 						</Badge>
 					</div>
+					<CourseCardOverlay :course="course" class="md:hidden mb-4" />
 					<div
 						v-html="course.data.description"
 						class="course-description"
@@ -92,7 +93,7 @@
 						:membership="course.data.membership"
 					/>
 				</div>
-				<div class="">
+				<div class="hidden md:block">
 					<CourseCardOverlay :course="course" />
 				</div>
 			</div>
@@ -143,7 +144,7 @@ const pageMeta = computed(() => {
 
 updateDocumentTitle(pageMeta)
 </script>
-<style>
+<style scoped>
 .course-description p {
 	margin-bottom: 1rem;
 	line-height: 1.7;
diff --git a/frontend/src/pages/Courses.vue b/frontend/src/pages/Courses.vue
index 9890b97c..936e3a9b 100644
--- a/frontend/src/pages/Courses.vue
+++ b/frontend/src/pages/Courses.vue
@@ -1,108 +1,104 @@
 <template>
-	<div class="h-screen">
-		<div v-if="courses.data">
-			<header
-				class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+	<div v-if="courses.data">
+		<header
+			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+		>
+			<Breadcrumbs
+				class="h-7"
+				:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
+			/>
+			<div class="flex">
+				<router-link
+					:to="{
+						name: 'CreateCourse',
+						params: {
+							courseName: 'new',
+						},
+					}"
+				>
+					<Button v-if="user.data?.is_moderator" variant="solid">
+						<template #prefix>
+							<Plus class="h-4 w-4" />
+						</template>
+						{{ __('New Course') }}
+					</Button>
+				</router-link>
+			</div>
+		</header>
+		<div class="">
+			<div
+				v-if="courses.data.length == 0 && courses.list.loading"
+				class="p-5 text-base text-gray-700"
 			>
-				<Breadcrumbs
-					class="h-7"
-					:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
-				/>
-				<div class="flex">
-					<router-link
-						:to="{
-							name: 'CreateCourse',
-							params: {
-								courseName: 'new',
-							},
-						}"
+				{{ __('Loading Courses...') }}
+			</div>
+			<Tabs
+				v-else
+				v-model="tabIndex"
+				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
+				:tabs="tabs"
+			>
+				<template #tab="{ tab, selected }">
+					<div>
+						<button
+							class="group -mb-px flex items-center gap-2 overflow-hidden border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
+							:class="{ 'text-gray-900': selected }"
+						>
+							<component v-if="tab.icon" :is="tab.icon" class="h-5" />
+							{{ __(tab.label) }}
+							<Badge theme="gray">
+								{{ tab.count }}
+							</Badge>
+						</button>
+					</div>
+				</template>
+				<template #default="{ tab }">
+					<div
+						v-if="tab.courses && tab.courses.value.length"
+						class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 my-5 mx-5"
 					>
-						<Button v-if="user.data?.is_moderator" variant="solid">
-							<template #prefix>
-								<Plus class="h-4 w-4" />
-							</template>
-							{{ __('New Course') }}
-						</Button>
-					</router-link>
-				</div>
-			</header>
-			<div class="">
-				<div
-					v-if="courses.data.length == 0 && courses.list.loading"
-					class="p-5 text-base text-gray-700"
-				>
-					{{ __('Loading Courses...') }}
-				</div>
-				<Tabs
-					v-else
-					v-model="tabIndex"
-					:tabs="tabs"
-					tablistClass="overflow-x-visible"
-				>
-					<template #tab="{ tab, selected }">
-						<div>
-							<button
-								class="group -mb-px flex items-center gap-2 overflow-hidden border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-								:class="{ 'text-gray-900': selected }"
-							>
-								<component v-if="tab.icon" :is="tab.icon" class="h-5" />
-								{{ __(tab.label) }}
-								<Badge theme="gray">
-									{{ tab.count }}
-								</Badge>
-							</button>
-						</div>
-					</template>
-					<template #default="{ tab }">
-						<div
-							v-if="tab.courses && tab.courses.value.length"
-							class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 my-5 mx-5"
+						<router-link
+							v-for="course in tab.courses.value"
+							:to="
+								course.membership && course.current_lesson
+									? {
+											name: 'Lesson',
+											params: {
+												courseName: course.name,
+												chapterNumber: course.current_lesson.split('.')[0],
+												lessonNumber: course.current_lesson.split('.')[1],
+											},
+									  }
+									: course.membership
+									? {
+											name: 'Lesson',
+											params: {
+												courseName: course.name,
+												chapterNumber: 1,
+												lessonNumber: 1,
+											},
+									  }
+									: {
+											name: 'CourseDetail',
+											params: { courseName: course.name },
+									  }
+							"
 						>
-							<router-link
-								v-for="course in tab.courses.value"
-								:to="
-									course.membership && course.current_lesson
-										? {
-												name: 'Lesson',
-												params: {
-													courseName: course.name,
-													chapterNumber: course.current_lesson.split('.')[0],
-													lessonNumber: course.current_lesson.split('.')[1],
-												},
-										  }
-										: course.membership
-										? {
-												name: 'Lesson',
-												params: {
-													courseName: course.name,
-													chapterNumber: 1,
-													lessonNumber: 1,
-												},
-										  }
-										: {
-												name: 'CourseDetail',
-												params: { courseName: course.name },
-										  }
-								"
-							>
-								<CourseCard :course="course" />
-							</router-link>
-						</div>
-						<div
-							v-else
-							class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
-						>
-							<div class="flex flex-col items-center justify-center mt-4">
-								<div>
-									{{
-										__('No {0} courses found').format(tab.label.toLowerCase())
-									}}
-								</div>
+							<CourseCard :course="course" />
+						</router-link>
+					</div>
+					<div
+						v-else
+						class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
+					>
+						<div class="flex flex-col items-center justify-center mt-4">
+							<div>
+								{{ __('No {0} courses found').format(tab.label.toLowerCase()) }}
 							</div>
 						</div>
-					</template>
-				</Tabs>
-			</div>
+					</div>
+				</template>
+			</Tabs>
 		</div>
 	</div>
 </template>
diff --git a/frontend/src/pages/CreateCourse.vue b/frontend/src/pages/CreateCourse.vue
index 28615993..d87ce9f2 100644
--- a/frontend/src/pages/CreateCourse.vue
+++ b/frontend/src/pages/CreateCourse.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="h-screen text-base">
-		<div class="grid grid-cols-[70%,30%] h-full">
+	<div class="">
+		<div class="grid md:grid-cols-[70%,30%] h-full">
 			<div>
 				<header
 					class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
diff --git a/frontend/src/pages/CreateLesson.vue b/frontend/src/pages/CreateLesson.vue
index 9bed311b..cdd0e24b 100644
--- a/frontend/src/pages/CreateLesson.vue
+++ b/frontend/src/pages/CreateLesson.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="h-screen text-base">
+	<div class="">
 		<div class="grid grid-cols-[75%,25%] h-full">
 			<div class="border-r">
 				<header
@@ -411,7 +411,7 @@ const breadcrumbs = computed(() => {
 	return crumbs
 })
 </script>
-<style>
+<style scoped>
 .embed-tool__caption {
 	display: none;
 }
diff --git a/frontend/src/pages/JobCreation.vue b/frontend/src/pages/JobCreation.vue
index 1ce01d1e..a03ec3ce 100644
--- a/frontend/src/pages/JobCreation.vue
+++ b/frontend/src/pages/JobCreation.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="h-screen text-base">
+	<div class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
diff --git a/frontend/src/pages/JobDetail.vue b/frontend/src/pages/JobDetail.vue
index 7d7806ef..3b49dc87 100644
--- a/frontend/src/pages/JobDetail.vue
+++ b/frontend/src/pages/JobDetail.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="text-base h-screen">
+	<div class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
diff --git a/frontend/src/pages/Jobs.vue b/frontend/src/pages/Jobs.vue
index 9098b0a9..ecc8d658 100644
--- a/frontend/src/pages/Jobs.vue
+++ b/frontend/src/pages/Jobs.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="h-screen text-base">
+	<div class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
@@ -27,7 +27,7 @@
 			</div>
 		</header>
 		<div v-if="jobs.data">
-			<div class="grid grid-cols-2 gap-5 p-5">
+			<div class="grid grid-cols-1 lg:grid-cols-2 gap-5 p-5">
 				<div v-if="jobs.data.length" v-for="job in jobs.data">
 					<router-link
 						:to="{
diff --git a/frontend/src/pages/Lesson.vue b/frontend/src/pages/Lesson.vue
index 8034f8ce..b8f4b958 100644
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -1,12 +1,15 @@
 <template>
-	<div v-if="lesson.data" class="h-screen text-base">
+	<div v-if="lesson.data" class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
 		</header>
-		<div class="grid grid-cols-[70%,30%] h-full">
-			<div v-if="lesson.data.no_preview" class="border-r-1 text-center pt-10">
+		<div class="grid md:grid-cols-[70%,30%] h-full">
+			<div
+				v-if="lesson.data.no_preview"
+				class="border-r-2 text-center pt-10 px-5 md:px-0 pb-10"
+			>
 				<p class="mb-4">
 					{{
 						__(
@@ -22,12 +25,12 @@
 					</Button>
 				</router-link>
 			</div>
-			<div v-else class="border-r-2 container pt-5 pb-10">
-				<div class="flex items-center justify-between">
+			<div v-else class="border-r-2 container pt-5 pb-10 px-5">
+				<div class="flex flex-col md:flex-row md:items-center justify-between">
 					<div class="text-3xl font-semibold">
 						{{ lesson.data.title }}
 					</div>
-					<div class="flex items-center">
+					<div class="flex items-center mt-2 md:mt-0">
 						<router-link
 							v-if="lesson.data.prev"
 							:to="{
@@ -336,7 +339,7 @@ const allowInstructorContent = () => {
 	return false
 }
 </script>
-<style>
+<style scoped>
 .avatar-group {
 	display: inline-flex;
 	align-items: center;
diff --git a/frontend/src/pages/Statistics.vue b/frontend/src/pages/Statistics.vue
index e4ba2d84..a53a01ba 100644
--- a/frontend/src/pages/Statistics.vue
+++ b/frontend/src/pages/Statistics.vue
@@ -1,12 +1,12 @@
 <template>
-	<div class="h-screen text-base">
+	<div class="">
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
 		</header>
 		<div v-if="chartDetails.data" class="p-5">
-			<div class="grid grid-cols-5 gap-4">
+			<div class="grid grid-cols-2 lg:gridc-cols-5 gap-4">
 				<div class="flex items-center shadow py-2 px-3 rounded-md">
 					<div class="p-2 rounded-md bg-gray-100 mr-3">
 						<BookOpen class="w-18 h-18 stroke-1.5 text-gray-700" />
@@ -73,7 +73,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="grid grid-cols-2 gap-4 mt-4">
+			<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
 				<div class="shadow rounded-md p-5 min-h-72">
 					<Line
 						v-if="signupsChart.data"
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index ebc51daa..85303ce0 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -1312,16 +1312,14 @@ def get_lesson(course, chapter, lesson):
 		"Course Lesson", lesson_name, ["include_in_preview", "title"], as_dict=1
 	)
 	membership = get_membership(course)
+	course_title = frappe.db.get_value("LMS Course", course, "title")
 	if (
 		not lesson_details.include_in_preview
 		and not membership
 		and not has_course_moderator_role()
 		and not is_instructor(course)
 	):
-		return {
-			"no_preview": 1,
-			"title": lesson_details.title,
-		}
+		return {"no_preview": 1, "title": lesson_details.title, "course_title": course_title}
 
 	lesson_details = frappe.db.get_value(
 		"Course Lesson",
@@ -1356,7 +1354,7 @@ def get_lesson(course, chapter, lesson):
 	lesson_details.prev = neighbours["prev"]
 	lesson_details.membership = membership
 	lesson_details.instructors = get_instructors(course)
-	lesson_details.course_title = frappe.db.get_value("LMS Course", course, "title")
+	lesson_details.course_title = course_title
 	return lesson_details