fix: ensure tags wrap correctly to prevent overflow and breaking of layout

This commit is contained in:
Joedeep Singh
2025-07-03 18:25:04 +00:00
parent f2c8788602
commit eed339cc64

View File

@@ -50,11 +50,12 @@
<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 class="flex items-center flex-wrap gap-2">
<div <div
v-if="course.tags" v-if="course.tags"
v-for="tag in course.tags?.split(', ')" 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" class="flex items-center bg-surface-gray-2 text-ink-gray-7 p-2 rounded-md"
> >
{{ tag }} {{ tag }}
<X <X
@@ -62,10 +63,11 @@
@click="removeTag(tag)" @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"
/> />