fix: responsive layout for pages

frontend/src/components/BatchStudents.vue

@@ -5,7 +5,7 @@
 				{{ __('Statistics') }}
 			</div>
 		</div>
-		<div class="grid grid-cols-4 gap-5 mb-8">
+		<div class="grid grid-cols-2 md:grid-cols-4 gap-5 mb-8">
 			<NumberChart
 				class="border rounded-md"
 				:config="{ title: __('Students'), value: students.data?.length || 0 }"

frontend/src/pages/Batch.vue

@@ -23,7 +23,7 @@
 		</header>
 		<div
 			v-if="batch.data"
-			class="grid grid-cols-[75%,25%] h-[calc(100vh-3.2rem)]"
+			class="grid grid-cols-1 md:grid-cols-[75%,25%] h-[calc(100vh-3.2rem)]"
 		>
 			<div class="border-r">
 				<Tabs
@@ -95,7 +95,7 @@
 					</template>
 				</Tabs>
 			</div>
-			<div class="p-5">
+			<div class="p-5 border-t md:border-t-0">
 				<div class="mb-10">
 					<div class="text-ink-gray-7 font-semibold mb-2">
 						{{ __('About this batch') }}

frontend/src/pages/BatchDetail.vue

@@ -28,6 +28,7 @@
 						</div>
 						<CourseInstructors :instructors="batch.data.instructors" />
 					</div>
+					<BatchOverlay :batch="batch" class="md:hidden mt-5" />
 					<div
 						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-10"
 						v-html="batch.data.batch_details"
@@ -37,7 +38,6 @@
 					<BatchOverlay :batch="batch" />
 				</div>
 			</div>
-			<BatchOverlay :batch="batch" class="md:hidden mt-5" />
 			<div v-if="batch.data.courses.length">
 				<div class="flex items-center mt-10">
 					<div class="text-2xl font-semibold">

frontend/src/pages/Batches.vue

@@ -26,18 +26,13 @@
 				{{ __('All Batches') }}
 			</div>
 			<div
-				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
+				class="flex flex-col space-y-3 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
 			>
 				<TabButtons
 					v-if="user.data"
 					:buttons="batchTabs"
 					v-model="currentTab"
-				/>
+					class="w-fit"
-				<FormControl
-					v-model="certification"
-					:label="__('Certification')"
-					type="checkbox"
-					@change="updateBatches()"
 				/>
 				<div class="grid grid-cols-2 gap-2">
 					<FormControl
@@ -57,6 +52,13 @@
 						/>
 					</div>
 				</div>
+
+				<FormControl
+					v-model="certification"
+					:label="__('Certification')"
+					type="checkbox"
+					@change="updateBatches()"
+				/>
 			</div>
 		</div>
 		<div

frontend/src/pages/Courses.vue

@@ -28,7 +28,7 @@
 			<div
 				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
 			>
-				<TabButtons :buttons="courseTabs" v-model="currentTab" />
+				<TabButtons :buttons="courseTabs" v-model="currentTab" class="w-fit" />
 				<FormControl
 					v-model="certification"
 					:label="__('Certification')"

frontend/src/pages/Lesson.vue

@@ -13,10 +13,9 @@
 					</Button>
 				</Tooltip>
 				<Button v-if="canSeeStats()" @click="showVideoStats()">
-					<template #prefix>
+					<template #icon>
 						<TrendingUp class="size-4 stroke-1.5" />
 					</template>
-					{{ __('Video Statistics') }}
 				</Button>
 				<CertificationLinks :courseName="courseName" />
 			</div>
@@ -76,7 +75,7 @@
 				>
 					<div class="px-5">
 						<div
-							class="flex flex-col md:flex-row md:items-center justify-between"
+							class="flex flex-col space-y-3 md:space-y-0 md:flex-row md:items-center justify-between"
 						>
 							<div class="flex flex-col">
 								<div class="text-3xl font-semibold text-ink-gray-9">
@@ -158,7 +157,7 @@
 							</div>
 						</div>
 
-						<div v-if="!zenModeEnabled" class="flex items-center mt-2">
+						<div v-if="!zenModeEnabled" class="flex items-center mt-4 md:mt-2">
 							<span
 								class="h-6 mr-1"
 								:class="{