This is an automated email from the ASF dual-hosted git repository.
zhaoqingran pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
The following commit(s) were added to refs/heads/master by this push:
new a74671abdd [improve]Improve UI handling for label overflow (#3913)
a74671abdd is described below
commit a74671abdd362585cb8f88624d54a079dde7fdef
Author: KOYR <[email protected]>
AuthorDate: Tue Dec 16 11:03:15 2025 +0800
[improve]Improve UI handling for label overflow (#3913)
Co-authored-by: 半半 <[email protected]>
Co-authored-by: Logic <[email protected]>
---
.../app/routes/setting/label/label.component.html | 24 +++++++++++++---------
.../app/routes/setting/label/label.component.less | 22 ++++++++++++++++++++
2 files changed, 36 insertions(+), 10 deletions(-)
diff --git a/web-app/src/app/routes/setting/label/label.component.html
b/web-app/src/app/routes/setting/label/label.component.html
index 0b9ed8f749..b843a78683 100644
--- a/web-app/src/app/routes/setting/label/label.component.html
+++ b/web-app/src/app/routes/setting/label/label.component.html
@@ -58,14 +58,18 @@
<div class="label-content">
<div class="label-header">
<a routerLink="/monitors" [queryParams]="{ labels:
formatLabelName(data) }">
- <nz-tag class="label-name" [nzColor]="getLabelColor(data.name)">
- {{ formatLabelName(data) }}
- </nz-tag>
+ <span nz-tooltip nzTooltipPlacement="leftTop"
[nzTooltipTitle]="formatLabelName(data)" class="tag-tooltip-wrapper">
+ <nz-tag class="label-name label-text-ellipsis"
[nzColor]="getLabelColor(data.name)">
+ {{ formatLabelName(data) }}
+ </nz-tag>
+ </span>
</a>
</div>
<div class="label-description" *ngIf="data.description">
- {{ data.description }}
+ <span nz-tooltip nzTooltipPlacement="leftTop"
[nzTooltipTitle]="data.description" class="tag-tooltip-wrapper">
+ {{ data.description }}
+ </span>
</div>
</div>
@@ -123,12 +127,12 @@
<nz-form-item *ngIf="label.name != undefined">
<nz-form-label [nzSpan]="7" nzFor="color">{{ 'label.display' | i18n
}}</nz-form-label>
<nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' |
i18n">
- <nz-tag *ngIf="label.tagValue == undefined || label.tagValue.trim()
== ''" [nzColor]="getLabelColor(label.name)">{{
- label.name
- }}</nz-tag>
- <nz-tag *ngIf="label.tagValue != undefined && label.tagValue.trim()
!= ''" [nzColor]="getLabelColor(label.name)">{{
- label.name + ':' + label.tagValue
- }}</nz-tag>
+ <nz-tag *ngIf="label.tagValue == undefined || label.tagValue.trim()
== ''" [nzColor]="getLabelColor(label.name)" class="wrap-tag">
+ {{ label.name }}
+ </nz-tag>
+ <nz-tag *ngIf="label.tagValue != undefined && label.tagValue.trim()
!= ''" [nzColor]="getLabelColor(label.name)" class="wrap-tag">
+ {{ label.name + ':' + label.tagValue }}
+ </nz-tag>
</nz-form-control>
</nz-form-item>
</form>
diff --git a/web-app/src/app/routes/setting/label/label.component.less
b/web-app/src/app/routes/setting/label/label.component.less
index 8f309700d4..8f9b1c5193 100644
--- a/web-app/src/app/routes/setting/label/label.component.less
+++ b/web-app/src/app/routes/setting/label/label.component.less
@@ -51,6 +51,16 @@
align-items: center;
justify-content: center;
margin-bottom: 8px;
+ a{
+ max-width: 100%;
+ }
+ }
+ .label-text-ellipsis {
+ display: block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.label-description {
font-size: 12px;
@@ -69,6 +79,7 @@
min-height: 80px;
display: flex;
flex-direction: column;
+ max-width: 100%;
}
.label-name {
@@ -82,6 +93,17 @@
background: @common-background-color;
}
+.wrap-tag{
+ white-space: normal;
+ height: auto;
+ display: inline-block;
+ word-break: break-all;
+ padding: 4px 8px;
+ line-height: 1.5;
+ max-width: 100%;
+ text-align: left;
+}
+
[data-theme='dark'] {
:host {
.label-name {
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
