preserve white-space when copying a multi-line custom field value

[pmenke-de]

The contents to copy for custom fields are rendered in a HTML span element, using a font-size of 0px; to hide the contents of this technical element:

snipe-it/resources/views/hardware/view.blade.php

Lines 733 to 735 in 00a17cd

	{{-- Hidden span used as copy target --}}
	{{-- It's tempting to break out the HTML into separate lines for this, but it results in extra spaces being added onto the end of the coipied value --}}
	<span class="js-copy-{{ $field->id }} hidden-print" style="font-size: 0px;">{{ ($field->isFieldDecryptable($asset->{$field->db_column_name()}) ? Helper::gracefulDecrypt($field, $asset->{$field->db_column_name()}) : $asset->{$field->db_column_name()}) }}</span>

When the field contains multi-line data (a configuration file for an asset in my case), white-space is not preserved and everything is copied in one line.

I would expect the contents to be copied, exactly as I entered them in the edit-view.

To remediate the issue I would suggest changing the span's CSS style to the following:

width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: preserve;
display: inline-block;

This essentially is the bootstrap definition of .visually-hidden

• without: padding: 0; border: 0;, as they don't apply here
• adding: display: inline-block; white-space: preserve, so that white-space is "rendered" -> copied when Clipboard.js reads the element's textContent