fix: mobile layout and certification link

frontend/src/components/CourseCardOverlay.vue

@@ -3,7 +3,7 @@
 		<iframe
 			v-if="course.data.video_link"
 			:src="video_link"
-			class="rounded-t-md min-h-56 min-w-80"
+			class="rounded-t-md min-h-56 w-full"
 		/>
 		<div class="p-5">
 			<div v-if="course.data.price" class="text-2xl font-semibold mb-3">

frontend/src/components/Discussions.vue

@@ -11,7 +11,7 @@
 		<div v-if="showTopics" v-for="(topic, index) in topics.data">
 			<div
 				@click="showReplies(topic)"
-				class="flex items-center cursor-pointer py-5"
+				class="flex items-center cursor-pointer py-5 w-full"
 				:class="{ 'border-b': index + 1 != topics.data.length }"
 			>
 				<UserAvatar :user="topic.user" size="2xl" class="mr-4" />
@@ -23,7 +23,7 @@
 						<span>
 							{{ topic.user.full_name }}
 						</span>
-						<span class="text-sm ml-2">
+						<span class="text-sm ml-3">
 							{{ timeAgo(topic.creation) }}
 						</span>
 					</div>

frontend/src/components/MobileLayout.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="flex h-full flex-col">
-		<div class="h-full" id="scrollContainer">
+		<div class="h-full pb-10" id="scrollContainer">
 			<slot />
 		</div>
 		<div
 			v-if="tabs"
-			class="grid grid-cols-5 border-t border-gray-300 sticky bottom-0 z-10 bg-white standalone:pb-4"
+			class="fixed flex justify-around border-t border-gray-300 bottom-0 z-10 w-full bg-white standalone:pb-4"
 			:style="{
-				gridTemplateColumns: `repeat(${tabs.length - 1}, minmax(0, 1fr))`,
+				gridTemplateColumns: `repeat(${tabs.length}, minmax(0, 1fr))`,
 			}"
 		>
 			<button
@@ -19,7 +19,7 @@
 			>
 				<component
 					:is="tab.icon"
-					class="h-7 w-7 stroke-1.5"
+					class="h-6 w-6 stroke-1.5"
 					:class="[isActive(tab) ? 'text-gray-900' : 'text-gray-600']"
 				/>
 			</button>