mirror of
https://github.com/louislam/uptime-kuma.git
synced 2026-06-23 04:10:14 +00:00
fix: prevent tags dropdown from overflowing viewport (#7460)
Co-authored-by: Frank Elsinga <frank@elsinga.de>
This commit is contained in:
Subrat Dwivedi
GitHub
@@ -70,7 +70,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider" />
|
||||
</li>
|
||||
<li>
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(true)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
@@ -107,11 +109,13 @@
|
||||
</MonitorListFilterDropdown>
|
||||
<MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0" @open-menu="getExistingTags">
|
||||
<template #status>
|
||||
<Tag
|
||||
<span
|
||||
v-if="filterState.tags?.length === 1"
|
||||
:item="tagsList.find((tag) => tag.id === filterState.tags[0])"
|
||||
:size="'sm'"
|
||||
/>
|
||||
class="selected-tag-wrapper"
|
||||
:title="tagsList.find((tag) => tag.id === filterState.tags[0])?.name"
|
||||
>
|
||||
<Tag :item="tagsList.find((tag) => tag.id === filterState.tags[0])" :size="'sm'" :constrained="true" />
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t("Tags") }}
|
||||
</span>
|
||||
@@ -123,7 +127,9 @@
|
||||
<li v-for="tag in tagsList" :key="tag.id">
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<span><Tag :item="tag" :size="'sm'" /></span>
|
||||
<span class="tag-name-wrapper" :title="tag.name">
|
||||
<Tag :item="tag" :size="'sm'" :scrollable="true" :constrained="true" />
|
||||
</span>
|
||||
<span class="ps-3">
|
||||
{{ getTaggedMonitorCount(tag) }}
|
||||
<span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
|
||||
@@ -352,6 +358,21 @@ export default {
|
||||
|
||||
.tags-dropdown-scroll {
|
||||
max-height: min(50vh, 320px);
|
||||
max-width: 45vw;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tag-name-wrapper {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
max-width: min(800px, 38vw);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.selected-tag-wrapper {
|
||||
max-width: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -38,7 +38,13 @@
|
||||
<div class="flex-fill text-truncate" style="min-width: 0">
|
||||
<div class="text-truncate">{{ monitor.name }}</div>
|
||||
<div v-if="monitor.tags.length > 0" class="tags gap-1">
|
||||
<Tag v-for="tag in monitor.tags" :key="tag" :item="tag" :size="'sm'" />
|
||||
<Tag
|
||||
v-for="tag in monitor.tags"
|
||||
:key="tag"
|
||||
:item="tag"
|
||||
:size="'sm'"
|
||||
:title="tag.name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,6 +7,8 @@
|
||||
'm-2': size == 'normal',
|
||||
'px-2': size == 'sm',
|
||||
'py-0': size == 'sm',
|
||||
'tag-scrollable': scrollable,
|
||||
'tag-constrained': constrained,
|
||||
}"
|
||||
:style="{ backgroundColor: item.color, fontSize: size == 'sm' ? '0.7em' : '1em' }"
|
||||
>
|
||||
@@ -45,6 +47,21 @@ export default {
|
||||
type: String,
|
||||
default: "normal",
|
||||
},
|
||||
/**
|
||||
* Whether the tag text should be horizontally scrollable
|
||||
* instead of truncated with ellipsis.
|
||||
*/
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* Whether the tag should be constrained to its parent's width.
|
||||
*/
|
||||
constrained: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
displayText() {
|
||||
@@ -75,6 +92,28 @@ export default {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tag-constrained {
|
||||
max-width: 100%;
|
||||
|
||||
.tag-text {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-scrollable .tag-text {
|
||||
overflow: auto;
|
||||
text-overflow: clip;
|
||||
scrollbar-width: none;
|
||||
display: inline-block;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
font-size: 0.9em;
|
||||
line-height: 24px;
|
||||
|
||||
@@ -7,6 +7,9 @@
|
||||
:key="`${item.tag_id || item.id}-${item.value || ''}`"
|
||||
:item="item"
|
||||
:remove="deleteTag"
|
||||
:title="item.name"
|
||||
:scrollable="true"
|
||||
:constrained="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
|
||||
@@ -15,13 +15,16 @@
|
||||
:disabled="processing"
|
||||
@click="editTag(index)"
|
||||
>
|
||||
<div class="col-10 col-sm-5">
|
||||
<Tag :item="tag" />
|
||||
<div class="flex-grow-1 overflow-hidden pe-3">
|
||||
<Tag :item="tag" :title="tag.name" :scrollable="true" :constrained="true" />
|
||||
</div>
|
||||
<div class="col-5 px-1 d-none d-sm-block">
|
||||
<div>{{ $t("Monitors", monitorsByTag(tag.id).length) }}</div>
|
||||
|
||||
<div class="flex-shrink-0 px-1">
|
||||
<span class="d-none d-lg-inline">{{ $t("Monitors", monitorsByTag(tag.id).length) }}</span>
|
||||
<span class="d-lg-none">{{ monitorsByTag(tag.id).length }} M</span>
|
||||
</div>
|
||||
<div class="col-2 pe-2 pe-lg-3 d-flex justify-content-end">
|
||||
|
||||
<div class="flex-shrink-0 pe-2 pe-lg-3">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-rm-tag btn btn-outline-danger ms-2 py-1"
|
||||
|
||||
@@ -15,7 +15,14 @@
|
||||
<p v-if="monitor.description" v-html="descriptionHTML"></p>
|
||||
<div class="d-flex">
|
||||
<div class="tags">
|
||||
<Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" />
|
||||
<Tag
|
||||
v-for="tag in monitor.tags"
|
||||
:key="tag.id"
|
||||
:item="tag"
|
||||
:size="'sm'"
|
||||
:scrollable="true"
|
||||
:constrained="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="url">
|
||||
@@ -1010,6 +1017,7 @@ table {
|
||||
|
||||
.tags {
|
||||
margin-bottom: 0.5rem;
|
||||
max-width: 95vw;
|
||||
}
|
||||
|
||||
.tags > div:first-child {
|
||||
|
||||
Reference in New Issue
Block a user