From 2eba7f254a3a7b51ff023f85493f8b4257cc0ba0 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 29 Apr 2025 09:47:39 +0800
Subject: [PATCH 1/4] size header list according to contents and eliminate size
 jump on hover

---
 .../src/components/messages2/HeadersView.vue  | 53 ++++++++++++-------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue
index 293c12caf..81944d7f3 100644
--- a/src/Frontend/src/components/messages2/HeadersView.vue
+++ b/src/Frontend/src/components/messages2/HeadersView.vue
@@ -35,19 +35,15 @@ const filteredHeaders = computed(() => {
       </div>
     </div>
   </div>
-  <table class="table" v-if="filteredHeaders.length > 0 && !headers.not_found">
-    <tbody>
-      <tr class="interactiveList" v-for="(header, index) in filteredHeaders" :key="index">
-        <td nowrap="nowrap">{{ header.key }}</td>
-        <td>
-          <div class="headercopy" @mouseover="toggleHover(index, true)" @mouseleave="toggleHover(index, false)">
-            <pre>{{ header.value }}</pre>
-            <CopyToClipboard v-if="hoverStates[index] && header.value" :value="header.value" :isIconOnly="true" />
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <div class="header-list" v-if="filteredHeaders.length > 0 && !headers.not_found">
+    <template v-for="(header, index) in filteredHeaders" :key="index">
+      <div class="header-key">{{ header.key }}</div>
+      <div class="header-value" @mouseover="toggleHover(index, true)" @mouseleave="toggleHover(index, false)">
+        <pre>{{ header.value }}</pre>
+        <div class="header-value-copy"><CopyToClipboard v-if="hoverStates[index] && header.value" :value="header.value" :isIconOnly="true" /></div>
+      </div>
+    </template>
+  </div>
 
   <!-- Message if filtered list is empty -->
   <div v-if="filteredHeaders.length <= 0 && !headers.not_found" class="alert alert-warning">No headers found matching the search term.</div>
@@ -55,11 +51,6 @@ const filteredHeaders = computed(() => {
 </template>
 
 <style scoped>
-.headercopy {
-  display: flex;
-  gap: 0.4rem;
-}
-
 /*  empty filtered list message */
 .alert-warning {
   margin-top: 10px;
@@ -90,4 +81,30 @@ const filteredHeaders = computed(() => {
   border-radius: 3px;
   padding: 5px;
 }
+
+.header-list {
+  margin-top: 0.5rem;
+  display: grid;
+  grid-template-columns: fit-content(30%) [key] fit-content(70%) [value];
+  align-items: center;
+  column-gap: 0.5rem;
+}
+
+.header-key {
+  grid-column: key;
+  display: contents;
+}
+
+.header-value {
+  grid-column: value;
+  position: relative;
+}
+
+.header-value-copy {
+  position: absolute;
+  right: 0.5rem;
+  right: 0.5rem;
+  top: 0.2rem;
+  z-index: 1;
+}
 </style>

From 1cc950d840d00683a0694dbaf3f0c7d8d48d43f4 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Tue, 29 Apr 2025 13:37:34 +1000
Subject: [PATCH 2/4] Keeping the copy to clipboard close to the content

---
 .../src/components/messages2/HeadersView.vue  | 27 +++++--------------
 1 file changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue
index 81944d7f3..119111636 100644
--- a/src/Frontend/src/components/messages2/HeadersView.vue
+++ b/src/Frontend/src/components/messages2/HeadersView.vue
@@ -40,7 +40,7 @@ const filteredHeaders = computed(() => {
       <div class="header-key">{{ header.key }}</div>
       <div class="header-value" @mouseover="toggleHover(index, true)" @mouseleave="toggleHover(index, false)">
         <pre>{{ header.value }}</pre>
-        <div class="header-value-copy"><CopyToClipboard v-if="hoverStates[index] && header.value" :value="header.value" :isIconOnly="true" /></div>
+        <div class="clippy-button"><CopyToClipboard v-if="header.value && hoverStates[index]" :value="header.value" :isIconOnly="true" /></div>
       </div>
     </template>
   </div>
@@ -69,11 +69,6 @@ const filteredHeaders = computed(() => {
   width: 100%;
   max-width: 40rem;
 }
-.format-text {
-  font-weight: unset;
-  font-size: 14px;
-  min-width: 120px;
-}
 .filters {
   background-color: #f3f3f3;
   margin-top: 5px;
@@ -83,28 +78,20 @@ const filteredHeaders = computed(() => {
 }
 
 .header-list {
+  margin-bottom: 1rem;
   margin-top: 0.5rem;
   display: grid;
-  grid-template-columns: fit-content(30%) [key] fit-content(70%) [value];
+  grid-template-columns: 20rem 1fr;
   align-items: center;
   column-gap: 0.5rem;
-}
-
-.header-key {
-  grid-column: key;
-  display: contents;
+  justify-content: center;
 }
 
 .header-value {
-  grid-column: value;
-  position: relative;
+  display: flex;
 }
 
-.header-value-copy {
-  position: absolute;
-  right: 0.5rem;
-  right: 0.5rem;
-  top: 0.2rem;
-  z-index: 1;
+.clippy-button {
+  width: 3.5rem;
 }
 </style>

From 0b98f61cfb1e92ce946c9c1a0c6ce5e41ef1ae41 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 30 Apr 2025 11:30:35 +1000
Subject: [PATCH 3/4] Remove bootstrap styles to pre

---
 .../src/components/messages2/HeadersView.vue  | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue
index 119111636..75c737969 100644
--- a/src/Frontend/src/components/messages2/HeadersView.vue
+++ b/src/Frontend/src/components/messages2/HeadersView.vue
@@ -39,7 +39,7 @@ const filteredHeaders = computed(() => {
     <template v-for="(header, index) in filteredHeaders" :key="index">
       <div class="header-key">{{ header.key }}</div>
       <div class="header-value" @mouseover="toggleHover(index, true)" @mouseleave="toggleHover(index, false)">
-        <pre>{{ header.value }}</pre>
+        <pre class="removeBootStrap">{{ header.value }}</pre>
         <div class="clippy-button"><CopyToClipboard v-if="header.value && hoverStates[index]" :value="header.value" :isIconOnly="true" /></div>
       </div>
     </template>
@@ -51,6 +51,13 @@ const filteredHeaders = computed(() => {
 </template>
 
 <style scoped>
+.removeBootStrap {
+  background: initial;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
 /*  empty filtered list message */
 .alert-warning {
   margin-top: 10px;
@@ -82,16 +89,27 @@ const filteredHeaders = computed(() => {
   margin-top: 0.5rem;
   display: grid;
   grid-template-columns: 20rem 1fr;
-  align-items: center;
-  column-gap: 0.5rem;
+  align-items: flex-start;
   justify-content: center;
 }
 
-.header-value {
+.header-value,
+.header-key {
+  padding: 1rem 0;
   display: flex;
+  height: fit-content;
+  min-height: 2rem;
+  border-top: 1px solid #ccc9c9;
+  position: relative;
+}
+
+.header-value {
+  padding-left: 2.7rem;
 }
 
 .clippy-button {
-  width: 3.5rem;
+  position: absolute;
+  left: 0;
+  top: 0.3rem;
 }
 </style>

From 9d51807485b2fd1f761ab98dbf513357797f8a45 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Wed, 30 Apr 2025 09:41:00 +0800
Subject: [PATCH 4/4] include row-gap and background to unify appearance with
 other lists

---
 src/Frontend/src/components/messages2/HeadersView.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue
index 75c737969..40afacce0 100644
--- a/src/Frontend/src/components/messages2/HeadersView.vue
+++ b/src/Frontend/src/components/messages2/HeadersView.vue
@@ -91,16 +91,17 @@ const filteredHeaders = computed(() => {
   grid-template-columns: 20rem 1fr;
   align-items: flex-start;
   justify-content: center;
+  row-gap: 2px;
 }
 
 .header-value,
 .header-key {
-  padding: 1rem 0;
+  padding: 1rem;
   display: flex;
-  height: fit-content;
+  height: 100%;
   min-height: 2rem;
-  border-top: 1px solid #ccc9c9;
   position: relative;
+  background: white;
 }
 
 .header-value {