From eed339cc6451f37a6d279c77353ee45018fce937 Mon Sep 17 00:00:00 2001
From: Joedeep Singh <joedeepbrar@gmail.com>
Date: Thu, 3 Jul 2025 18:25:04 +0000
Subject: [PATCH] fix: ensure tags wrap correctly to prevent overflow and
 breaking of layout

---
 frontend/src/pages/CourseForm.vue | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/CourseForm.vue b/frontend/src/pages/CourseForm.vue
index 154856bb..fbc509f1 100644
--- a/frontend/src/pages/CourseForm.vue
+++ b/frontend/src/pages/CourseForm.vue
@@ -50,22 +50,24 @@
 								<div class="mb-1.5 text-xs text-ink-gray-5">
 									{{ __('Tags') }}
 								</div>
-								<div class="flex items-center">
-									<div
-										v-if="course.tags"
-										v-for="tag in course.tags?.split(', ')"
-										class="flex items-center bg-surface-gray-2 text-ink-gray-7 p-2 rounded-md mr-2"
-									>
-										{{ tag }}
-										<X
-											class="stroke-1.5 w-3 h-3 ml-2 cursor-pointer"
-											@click="removeTag(tag)"
-										/>
+								<div>
+									<div class="flex items-center flex-wrap gap-2">
+										<div
+											v-if="course.tags"
+											v-for="tag in course.tags?.split(', ')"
+											class="flex items-center bg-surface-gray-2 text-ink-gray-7 p-2 rounded-md"
+										>
+											{{ tag }}
+											<X
+												class="stroke-1.5 w-3 h-3 ml-2 cursor-pointer"
+												@click="removeTag(tag)"
+											/>
+										</div>
 									</div>
 									<FormControl
 										v-model="newTag"
 										:placeholder="__('Add a keyword and then press enter')"
-										class="w-full"
+										:class="['w-full', 'flex-1', { 'mt-2': course.tags?.length }]"
 										@keyup.enter="updateTags()"
 										id="tags"
 									/>