#1653 Fix display of long custom field values in case and alert lists

TheHive-Project · Nov 18, 2020 · 4f0ac9c · 4f0ac9c
1 parent f1c65f2
commit 4f0ac9c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/frontend/app/styles/label.css b/frontend/app/styles/label.css
@@ -1,9 +1,9 @@
-.double-val-label {
+.kv-label {
 	display: table;
     margin-top: 0;
     margin-left: 0;
 }
-.double-val-label>span {
+.kv-label>span {
 	color: #ffffff;
 	display: table-cell;
 	font-weight: 400;
@@ -13,23 +13,34 @@
 	vertical-align: baseline;
 	white-space: nowrap;
 }
-.double-val-label>span:first-child {
+.kv-label span.kv-label-key {
     border-bottom-left-radius: 0.25em;
     border-top-left-radius: .25em;
     border-left-color: #3c8dbc;
     border-left-width: 3px;
     border-left-style: solid;
 }
-.double-val-label>span:last-child {
+.kv-label span.kv-label-val {
     border-bottom-right-radius: 0.25em;
     border-top-right-radius: .25em;
     border-left: 1px dashed #3c8dbc;
+
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 200px;
 }
-.double-val-label>span.primary {
+.kv-label>span.primary {
 	background-color: #3c8dbc;
     color: #fff;
 }
-.double-val-label>span.default {
+.kv-label>span.default {
     background-color: #d2d6de;
     color: #444;
 }
+
+
+.kv-label .tooltip-inner{
+	word-wrap: break-word;
+	text-align: left;
+	white-space: pre-line;
+}
diff --git a/frontend/app/views/components/common/custom-field-labels.component.html b/frontend/app/views/components/common/custom-field-labels.component.html
@@ -3,12 +3,12 @@
 
     <strong class="text-muted mr-xxxs" ng-if="!$cmp.customFields || $cmp.definedValues === 0 ">None</strong>
 
-    <span class="double-val-label mb-xxxs mr-xxxs pointer"
+    <span class="kv-label mb-xxxs mr-xxxs pointer"
         ng-repeat="cf in $cmp.customFields | orderBy:'order' track by $index"
         ng-click="$cmp.fieldClicked('customFields.' + cf.name, cf.value)"
         ng-if="cf.value !== undefined && cf.value !== null">
 
-        <span class="default" uib-tooltip="{{cf.description}}" tooltip-placement="top">{{$cmp.fieldsCache[cf.name].name || cf.name}}</span>
-        <span class="default">{{cf | customFieldValue}}</span>
+        <span class="kv-label-key default" uib-tooltip="{{cf.description}}" tooltip-placement="top">{{$cmp.fieldsCache[cf.name].name || cf.name}}</span>
+        <span class="kv-label-val value default" uib-tooltip="{{cf | customFieldValue}}" tooltip-placement="top">{{cf | customFieldValue}}</span>
     </span>
 </div>