add option to copy the header values to clipboard

Author: soujay

src/Frontend/src/components/CopyToClipboard.vue

@@ -19,6 +19,6 @@ async function copyToClipboard() {
 
 <template>
   <Tippy content="Copied" ref="tippyRef" trigger="manual">
-    <button type="button" class="btn btn-sm" @click="copyToClipboard"><i class="fa fa-copy"></i> Copy to clipboard</button>
+    <button type="button" title="Copy To Clipboard" class="btn btn-sm" @click="copyToClipboard"><i class="fa fa-copy"></i></button>
   </Tippy>
 </template>

src/Frontend/src/components/messages/HeadersView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ExtendedFailedMessage } from "@/resources/FailedMessage";
-
+import CopyToClipboard from "@/components/CopyToClipboard.vue";
 const props = defineProps<{
   message: ExtendedFailedMessage;
 }>();
@@ -11,8 +11,20 @@ const props = defineProps<{
     <tbody>
       <tr class="interactiveList" v-for="(header, index) in props.message.headers" :key="index">
         <td nowrap="nowrap">{{ header.key }}</td>
-        <td>
+        <td class="toolbar">
+          <!--
           <pre>{{ header.value }}</pre>
+          <span>
+            <CopyToClipboard :value="header.value || ''" />
+            
+          </span>
+          -->
+          <!-- Use flexbox to align items horizontally -->
+          <div style="display: flex; align-items: center">
+            <!-- The pre element should not wrap, so use white-space: nowrap or keep it as a block element -->
+            <pre style="margin: 0; white-space: nowrap">{{ header.value }}</pre>
+            <CopyToClipboard :value="header.value || ''" />
+          </div>
         </td>
       </tr>
     </tbody>