refactor: sidebar visibility of programs

frontend/src/pages/Programs/Programs.vue

@@ -14,7 +14,7 @@
 		<div class="text-lg font-semibold text-ink-gray-9 mb-5">
 			{{ __('{0} Programs').format(programs.data.length) }}
 		</div>
-		<div class="grid grid-cols-3 gap-5">
+		<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
 			<div
 				v-for="program in programs.data"
 				@click="openForm(program.name)"

frontend/src/pages/Programs/StudentPrograms.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="py-10 w-3/4 mx-auto">
+	<div class="py-5 px-5 w-full lg:w-3/4 lg:px-0 mx-auto">
 		<div class="flex items-center justify-between mb-5">
 			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('All Programs') }}
@@ -8,7 +8,10 @@
 		</div>
 		<div v-for="(data, category) in programs.data">
 			<div v-if="category == currentTab">
-				<div v-if="data.length > 0" class="grid grid-cols-3 gap-5">
+				<div
+					v-if="data.length > 0"
+					class="grid grid-cols-1 lg:grid-cols-3 gap-5"
+				>
 					<div
 						v-for="program in data"
 						@click="openDetails(program.name, category)"