diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html index 089db1e98d..61dc5bf013 100644 --- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html +++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html @@ -160,17 +160,41 @@ {{ 'attribute.key' | translate }} - - {{ attribute.key }} + +
+ {{ attribute.key }} + + +
{{ 'attribute.value' | translate }} -
- {{attribute.value | tbJson}} +
+
+ {{attribute.value | tbJson}} + + +
edit diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss index 67bf37453a..831762d1e4 100644 --- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss +++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss @@ -51,6 +51,7 @@ overflow: auto; .mat-mdc-table { table-layout: fixed; + min-width: 450px; } } @@ -65,6 +66,22 @@ overflow: hidden; text-overflow: ellipsis; } + + .ellipsis { + overflow: hidden; + text-overflow: ellipsis; + } + + .attribute-copy { + visibility: hidden; + transition: visibility 0.1s; + } + + .attribute:hover { + .attribute-copy { + visibility: visible; + } + } } } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 9f00ca2574..801aff32bf 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -691,7 +691,9 @@ "selected-attributes": "{ count, plural, =1 {1 attribute} other {# attributes} } selected", "selected-telemetry": "{ count, plural, =1 {1 telemetry unit} other {# telemetry units} } selected", "no-attributes-text": "No attributes found", - "no-telemetry-text": "No telemetry found" + "no-telemetry-text": "No telemetry found", + "copy-key": "Copy key", + "copy-value": "Copy value" }, "api-usage": { "api-features": "API features",