Repository: louislam/uptime-kuma
File: src/components/TagsManager.vue (Vue)

Code before:
        <div class="p-1">
            <button
                type="button"
                class="btn btn-outline-secondary btn-add"
                :disabled="processing"
                data-testid="add-tag-button"
                @click.stop="showAddDialog"
            >
                <font-awesome-icon class="me-1" icon="plus" /> {{ $t("Add") }}
            </button>
        </div>
        <div ref="modal" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <!-- Display area for tags staged for batch addition -->
                        <h4 v-if="stagedForBatchAdd.length > 0">{{ $t("Add Tags") }}</h4>
                        <div v-if="stagedForBatchAdd.length > 0" class="mb-3 staging-area" style="max-height: 150px; overflow-y: auto;">
                            <Tag
                                v-for="stagedTag in stagedForBatchAdd"
                                :key="stagedTag.keyForList"
                                :item="mapStagedTagToDisplayItem(stagedTag)"
                                :remove="() => unstageTag(stagedTag)"
                            />
                        </div>
                        <!-- End Staging Display -->

                        <vue-multiselect
                            v-model="newDraftTag.select"
                            class="mb-2"
                            :options="tagOptions"
                            :multiple="false"
                            :searchable="true"
                            :placeholder="$t('Add New below or Select...')"
                            track-by="id"
                            label="name"
                        >
                            <template #option="{ option }">
                                <div
                                    class="mx-2 py-1 px-3 rounded d-inline-flex"
                                    style="margin-top: -5px; margin-bottom: -5px; height: 24px;"
                                    :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
                                >
                                    <span>
                                        {{ option.name }}</span>
                                </div>
                            </template>
                            <template #singleLabel="{ option }">
                                <div
                                    class="py-1 px-3 rounded d-inline-flex"
                                    style="height: 24px;"

Review comment (bug):
```suggestion
                        <h4 v-if="stagedForBatchAdd.length > 0">{{ $t("Add Tags") }}</h4>
                        <div v-if="stagedForBatchAdd.length > 0" class="mb-3 staging-area" style="max-height: 150px; overflow-y: auto;">
                            <Tag
                                v-for="stagedTag in stagedForBatchAdd"
                                :key="stagedTag.keyForList"
                                :item="mapStagedTagToDisplayItem(stagedTag)"
                                :remove="() => unstageTag(stagedTag)"
                            />
                        </div>
```

Code after:
        <div class="p-1">
            <button
                type="button"
                class="btn btn-outline-secondary btn-add"
                :disabled="processing"
                data-testid="add-tag-button"
                @click.stop="showAddDialog"
            >
                <font-awesome-icon class="me-1" icon="plus" /> {{ $t("Add") }}
            </button>
        </div>
        <div ref="modal" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <h4 v-if="stagedForBatchAdd.length > 0">{{ $t("Add Tags") }}</h4>
                        <div v-if="stagedForBatchAdd.length > 0" class="mb-3 staging-area" style="max-height: 150px; overflow-y: auto;">
                            <Tag
                                v-for="stagedTag in stagedForBatchAdd"
                                :key="stagedTag.keyForList"
                                :item="mapStagedTagToDisplayItem(stagedTag)"
                                :remove="() => unstageTag(stagedTag)"
                            />
                        </div>

                        <vue-multiselect
                            v-model="newDraftTag.select"
                            class="mb-2"
                            :options="tagOptions"
                            :multiple="false"
                            :searchable="true"
                            :placeholder="$t('Add New below or Select...')"
                            track-by="id"
                            label="name"
                        >
                            <template #option="{ option }">
                                <div
                                    class="mx-2 py-1 px-3 rounded d-inline-flex"
                                    style="margin-top: -5px; margin-bottom: -5px; height: 24px;"
                                    :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
                                >
                                    <span>
                                        {{ option.name }}</span>
                                </div>
                            </template>
                            <template #singleLabel="{ option }">
                                <div
                                    class="py-1 px-3 rounded d-inline-flex"
                                    style="height: 24px;"
                                    :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
                                >