From b496edf30453a6d931269ada53576752a07d1219 Mon Sep 17 00:00:00 2001
From: Shijun Sun <30999793+AllForNothing@users.noreply.github.com>
Date: Tue, 1 Aug 2023 17:24:28 +0800
Subject: [PATCH] Update style for banner message ui (#19069)

1.Fixes #19021
2.Fixes #19022

Signed-off-by: AllForNothing <sshijun@vmware.com>
---
 .../app-level-alerts/app-level-alerts.component.html        | 6 ++++--
 .../app-level-alerts/app-level-alerts.component.scss        | 5 +++++
 .../config/system/system-settings.component.html            | 1 +
 .../vulnerability-summary.component.scss                    | 4 ++++
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/portal/src/app/base/harbor-shell/app-level-alerts/app-level-alerts.component.html b/src/portal/src/app/base/harbor-shell/app-level-alerts/app-level-alerts.component.html
index 769891065..420310149 100644
--- a/src/portal/src/app/base/harbor-shell/app-level-alerts/app-level-alerts.component.html
+++ b/src/portal/src/app/base/harbor-shell/app-level-alerts/app-level-alerts.component.html
@@ -1,11 +1,13 @@
 <clr-alerts>
     <clr-alert
-        *ngIf="hasValidBannerMessage() && isLogin()"
+        *ngIf="hasValidBannerMessage()"
         [clrAlertType]="getBannerMessageType()"
         [clrAlertAppLevel]="true"
         [clrAlertClosable]="getBannerMessageClosable()">
         <clr-alert-item>
-            <span class="alert-text">{{ getBannerMessage() }}</span>
+            <span class="alert-text banner-message">{{
+                getBannerMessage()
+            }}</span>
         </clr-alert-item>
     </clr-alert>
     <clr-alert
diff --git a/src/portal/src/app/base/harbor-shell/app-level-alerts/app-level-alerts.component.scss b/src/portal/src/app/base/harbor-shell/app-level-alerts/app-level-alerts.component.scss
index d8c1bf746..be55a680c 100644
--- a/src/portal/src/app/base/harbor-shell/app-level-alerts/app-level-alerts.component.scss
+++ b/src/portal/src/app/base/harbor-shell/app-level-alerts/app-level-alerts.component.scss
@@ -14,3 +14,8 @@
 .no-underline {
   text-decoration: none;
 }
+
+.banner-message {
+  min-width: 0;
+  word-break: break-word;
+}
diff --git a/src/portal/src/app/base/left-side-nav/config/system/system-settings.component.html b/src/portal/src/app/base/left-side-nav/config/system/system-settings.component.html
index 08a1e469d..a75f855bd 100644
--- a/src/portal/src/app/base/left-side-nav/config/system/system-settings.component.html
+++ b/src/portal/src/app/base/left-side-nav/config/system/system-settings.component.html
@@ -359,6 +359,7 @@
                         }}"
                         autocomplete="off"
                         class="clr-textarea"
+                        maxlength="800"
                         [(ngModel)]="messageText"
                         [ngModelOptions]="{ standalone: true }"
                         [disabled]="
diff --git a/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.scss b/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.scss
index 94043c46b..3c11e909f 100644
--- a/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.scss
+++ b/src/portal/src/app/base/left-side-nav/interrogation-services/vulnerability-database/vulnerability-summary/vulnerability-summary.component.scss
@@ -94,3 +94,7 @@ $row-height: 48px;
 .no-border {
   border: none;
 }
+
+.clr-col {
+  min-width: 0;
+}