Merge pull request #1619 from JoeBrar/fix/lms-issues

fix: ensure tags wrap correctly to prevent overflow and breaking of layout
This commit is contained in:
Jannat Patel
2025-07-07 12:59:26 +05:30
committed by GitHub

View File

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