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/9] 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 6c579c3ef2116f6a30c255ebe7d7eeb9c6279431 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 29 Apr 2025 10:36:29 +0800
Subject: [PATCH 2/9] enable tab contents to scroll independent of parent, so
 that the header and filter contents are visible while scrolled

---
 .../src/components/messages2/HeadersView.vue        |  1 +
 .../src/components/messages2/MessageView.vue        | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue
index 81944d7f3..67c755bef 100644
--- a/src/Frontend/src/components/messages2/HeadersView.vue
+++ b/src/Frontend/src/components/messages2/HeadersView.vue
@@ -83,6 +83,7 @@ const filteredHeaders = computed(() => {
 }
 
 .header-list {
+  overflow: auto;
   margin-top: 0.5rem;
   display: grid;
   grid-template-columns: fit-content(30%) [key] fit-content(70%) [value];
diff --git a/src/Frontend/src/components/messages2/MessageView.vue b/src/Frontend/src/components/messages2/MessageView.vue
index 2aafb82a7..11b16b3c8 100644
--- a/src/Frontend/src/components/messages2/MessageView.vue
+++ b/src/Frontend/src/components/messages2/MessageView.vue
@@ -155,7 +155,7 @@ onMounted(() => {
             </div>
           </div>
         </div>
-        <div class="row">
+        <div class="row tab-contents">
           <div class="col-sm-12 no-side-padding">
             <TabsLayout :tabs="tabs" />
           </div>
@@ -168,6 +168,17 @@ onMounted(() => {
 <style scoped>
 @import "../list.css";
 
+.container,
+section,
+.tab-contents,
+.tab-contents > div {
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+
 h1.message-type-title {
   margin: 0 0 8px;
   font-size: 24px;

From 395ea4e3bb3afb02ccdc4ad06cd1bb8ba3d01fff Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Thu, 1 May 2025 07:50:28 +0800
Subject: [PATCH 3/9] message content to size to container

---
 src/Frontend/src/assets/main.css                          | 2 +-
 src/Frontend/src/components/messages2/HeadersView.vue     | 3 +--
 src/Frontend/src/components/messages2/SequenceDiagram.vue | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/Frontend/src/assets/main.css b/src/Frontend/src/assets/main.css
index 559eedee6..171a6d8bd 100644
--- a/src/Frontend/src/assets/main.css
+++ b/src/Frontend/src/assets/main.css
@@ -76,7 +76,7 @@ body {
 
 #main-content {
   padding-top: 40px;
-  padding-bottom: 40px;
+  padding-bottom: 50px;
   overflow: auto;
   flex: 1;
 }
diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue
index 40afacce0..b157cf1a2 100644
--- a/src/Frontend/src/components/messages2/HeadersView.vue
+++ b/src/Frontend/src/components/messages2/HeadersView.vue
@@ -85,13 +85,13 @@ const filteredHeaders = computed(() => {
 }
 
 .header-list {
-  margin-bottom: 1rem;
   margin-top: 0.5rem;
   display: grid;
   grid-template-columns: 20rem 1fr;
   align-items: flex-start;
   justify-content: center;
   row-gap: 2px;
+  overflow: auto;
 }
 
 .header-value,
@@ -99,7 +99,6 @@ const filteredHeaders = computed(() => {
   padding: 1rem;
   display: flex;
   height: 100%;
-  min-height: 2rem;
   position: relative;
   background: white;
 }
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram.vue b/src/Frontend/src/components/messages2/SequenceDiagram.vue
index 08dd5f20f..9b12f2b49 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram.vue
@@ -31,7 +31,7 @@ onMounted(() => store.refreshConversation());
 <style scoped>
 .outer {
   max-width: 100%;
-  max-height: calc(100vh - 27em);
+  max-height: 100%;
   overflow: auto;
 }
 

From d801e0e11b21c7e79a19579c91c7ba483db9cd10 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 2 May 2025 09:20:09 +0800
Subject: [PATCH 4/9] revert headerview scroll after team discussion

---
 src/Frontend/src/components/messages2/HeadersView.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue
index b157cf1a2..40afacce0 100644
--- a/src/Frontend/src/components/messages2/HeadersView.vue
+++ b/src/Frontend/src/components/messages2/HeadersView.vue
@@ -85,13 +85,13 @@ const filteredHeaders = computed(() => {
 }
 
 .header-list {
+  margin-bottom: 1rem;
   margin-top: 0.5rem;
   display: grid;
   grid-template-columns: 20rem 1fr;
   align-items: flex-start;
   justify-content: center;
   row-gap: 2px;
-  overflow: auto;
 }
 
 .header-value,
@@ -99,6 +99,7 @@ const filteredHeaders = computed(() => {
   padding: 1rem;
   display: flex;
   height: 100%;
+  min-height: 2rem;
   position: relative;
   background: white;
 }

From 0240c59692b1bd1896f4cc586237872c4bd19b86 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 2 May 2025 09:34:14 +0800
Subject: [PATCH 5/9] size flow diagram to flex container

---
 src/Frontend/src/assets/main.css                                | 2 ++
 .../src/components/messages2/FlowDiagram/FlowDiagram.vue        | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Frontend/src/assets/main.css b/src/Frontend/src/assets/main.css
index 171a6d8bd..00b42004c 100644
--- a/src/Frontend/src/assets/main.css
+++ b/src/Frontend/src/assets/main.css
@@ -79,6 +79,8 @@ body {
   padding-bottom: 50px;
   overflow: auto;
   flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 h1 {
diff --git a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
index 7ed378c38..1768a2e92 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
@@ -289,7 +289,7 @@ const errorColor = hexToCSSFilter("#be514a").filter;
 
 #tree-container {
   width: 92vw;
-  height: 70vh;
+  height: 100%;
 }
 
 .sagas {

From c12b8c0efbc396fbb05ebed59b3f0bb487de819f Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 2 May 2025 11:06:47 +0800
Subject: [PATCH 6/9] fix consistency across message view tabs after merge from
 master

---
 src/Frontend/src/components/CodeEditor.vue    | 15 +++---
 .../src/components/messages2/BodyView.vue     | 18 ++-----
 .../messages2/FlowDiagram/FlowDiagram.vue     |  4 +-
 .../src/components/messages2/HeadersView.vue  | 49 +++++++------------
 .../components/messages2/SequenceDiagram.vue  | 22 ++++-----
 5 files changed, 44 insertions(+), 64 deletions(-)

diff --git a/src/Frontend/src/components/CodeEditor.vue b/src/Frontend/src/components/CodeEditor.vue
index 7894aee13..8bd90bb8d 100644
--- a/src/Frontend/src/components/CodeEditor.vue
+++ b/src/Frontend/src/components/CodeEditor.vue
@@ -50,21 +50,20 @@ const extensions = computed(() => {
 </script>
 
 <template>
-  <div class="wrapper" :aria-label="ariaLabel" :class="css">
-    <div v-if="props.showCopyToClipboard || $slots.toolbarLeft || $slots.toolbarRight" class="toolbar">
-      <div><slot name="toolbarLeft"></slot></div>
-      <div>
-        <slot name="toolbarRight"></slot>
-        <CopyToClipboard class="clipboard" v-if="props.showCopyToClipboard" :value="code" />
-      </div>
+  <div v-if="props.showCopyToClipboard || $slots.toolbarLeft || $slots.toolbarRight" class="toolbar">
+    <div><slot name="toolbarLeft"></slot></div>
+    <div>
+      <slot name="toolbarRight"></slot>
+      <CopyToClipboard class="clipboard" v-if="props.showCopyToClipboard" :value="code" />
     </div>
+  </div>
+  <div class="wrapper" :aria-label="ariaLabel" :class="css">
     <CodeMirror v-model="code" :extensions="extensions" :basic="props.showGutter" :minimal="!props.showGutter" :readonly="props.readOnly" :gutter="!props.readOnly" :wrap="true"></CodeMirror>
   </div>
 </template>
 
 <style scoped>
 .wrapper {
-  margin-top: 5px;
   border-radius: 0.5rem;
   padding: 0.5rem;
   border: 1px solid #ccc;
diff --git a/src/Frontend/src/components/messages2/BodyView.vue b/src/Frontend/src/components/messages2/BodyView.vue
index edb8367e3..9660a95f6 100644
--- a/src/Frontend/src/components/messages2/BodyView.vue
+++ b/src/Frontend/src/components/messages2/BodyView.vue
@@ -21,17 +21,9 @@ const body = computed(() => bodyState.value.data.value);
 </script>
 
 <template>
-  <div class="gap">
-    <div v-if="bodyState.not_found" class="alert alert-info">Could not find the message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
-    <div v-else-if="bodyState.failed_to_load" class="alert alert-info">Message body unavailable.</div>
-    <LoadingSpinner v-else-if="bodyState.loading" />
-    <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
-    <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
-  </div>
+  <div v-if="bodyState.not_found" class="alert alert-info">Could not find the message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+  <div v-else-if="bodyState.failed_to_load" class="alert alert-info">Message body unavailable.</div>
+  <LoadingSpinner v-else-if="bodyState.loading" />
+  <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
+  <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
 </template>
-
-<style scoped>
-.gap {
-  margin-top: 5px;
-}
-</style>
diff --git a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
index dfbb73720..8de4ed34f 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
@@ -276,7 +276,9 @@ const selectedErrorColor = hexToCSSFilter("#e8e6e8").filter;
   padding: 0.5rem;
   border: 1px solid #ccc;
   background: white;
+  flex: 1;
 }
+
 .controls {
   display: flex;
   flex-wrap: wrap;
@@ -284,7 +286,7 @@ const selectedErrorColor = hexToCSSFilter("#e8e6e8").filter;
 }
 
 #tree-container {
-  width: 92vw;
+  width: 100%;
   height: 100%;
 }
 
diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue
index d2abbcd1a..7b6ff2776 100644
--- a/src/Frontend/src/components/messages2/HeadersView.vue
+++ b/src/Frontend/src/components/messages2/HeadersView.vue
@@ -22,44 +22,33 @@ const filteredHeaders = computed(() => {
 </script>
 
 <template>
-  <div class="gap">
-    <div>
-      <div class="row filters">
-        <div class="col">
-          <div class="text-search-container">
-            <div class="text-search">
-              <div>
-                <FilterInput v-model="searchTerm" :aria-label="`Search for a header key or value`" :placeholder="'Search for a header key or value...'" />
-              </div>
-            </div>
+  <div class="row filters">
+    <div class="col">
+      <div class="text-search-container">
+        <div class="text-search">
+          <div>
+            <FilterInput v-model="searchTerm" :aria-label="`Search for a header key or value`" :placeholder="'Search for a header key or value...'" />
           </div>
         </div>
       </div>
     </div>
-    <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 class="removeBootStrap">{{ header.value }}</pre>
-          <div class="clippy-button"><CopyToClipboard v-if="header.value && hoverStates[index]" :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>
-    <div v-if="headers.not_found" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
   </div>
+  <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 class="removeBootStrap">{{ header.value }}</pre>
+        <div class="clippy-button"><CopyToClipboard v-if="header.value && hoverStates[index]" :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>
+  <div v-if="headers.not_found" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
 </template>
 
 <style scoped>
-.gap {
-  margin-top: 5px;
-  border-radius: 0.5rem;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-  background: white;
-}
 .removeBootStrap {
   background: initial;
   border: none;
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram.vue b/src/Frontend/src/components/messages2/SequenceDiagram.vue
index 2b44d83e7..ed86c6886 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram.vue
@@ -18,18 +18,16 @@ onMounted(() => store.refreshConversation());
 </script>
 
 <template>
-  <div class="wrapper">
-    <div class="toolbar">
-      <a class="help-link" target="_blank" href="https://docs.particular.net/servicepulse/sequence-diagram"><i class="fa fa-info-circle" /> Sequence Diagram Help</a>
-    </div>
-    <div class="outer" @scroll="(ev) => (endpointYOffset = (ev.target as Element).scrollTop)">
-      <svg class="sequence-diagram" :style="{ width: `max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)` }" :height="maxHeight + 20">
-        <Timeline />
-        <Handlers />
-        <Routes />
-        <Endpoints :yOffset="endpointYOffset" />
-      </svg>
-    </div>
+  <div class="toolbar">
+    <a class="help-link" target="_blank" href="https://docs.particular.net/servicepulse/sequence-diagram"><i class="fa fa-info-circle" /> Sequence Diagram Help</a>
+  </div>
+  <div class="outer" @scroll="(ev) => (endpointYOffset = (ev.target as Element).scrollTop)">
+    <svg class="sequence-diagram" :style="{ width: `max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)` }" :height="maxHeight + 20">
+      <Timeline />
+      <Handlers />
+      <Routes />
+      <Endpoints :yOffset="endpointYOffset" />
+    </svg>
   </div>
 </template>
 

From 65aa04d43edffff82633da42863149f23acbf451 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 2 May 2025 13:16:46 +0800
Subject: [PATCH 7/9] change overflow-scope of container so that sticky can
 work inside immediate scroll context

---
 src/Frontend/src/assets/footer.css            |  3 --
 src/Frontend/src/assets/main.css              |  1 -
 .../src/components/messages2/MessageView.vue  | 12 ++++++
 .../components/messages2/SequenceDiagram.vue  | 40 ++++++++++++-------
 4 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/Frontend/src/assets/footer.css b/src/Frontend/src/assets/footer.css
index e52111e45..97b4ab018 100644
--- a/src/Frontend/src/assets/footer.css
+++ b/src/Frontend/src/assets/footer.css
@@ -2,13 +2,10 @@ footer {
   color: #bcc6c2;
   font-size: 14px;
   font-weight: normal;
-  margin-top: 100px;
   text-align: left;
   text-align: center;
   width: 100%;
   background-color: #fff;
-  position: fixed;
-  bottom: 0;
   border-top: 1px solid #ddd;
   box-shadow: 0px -10px 16px #f2f6f7;
   padding-top: 7px;
diff --git a/src/Frontend/src/assets/main.css b/src/Frontend/src/assets/main.css
index 00b42004c..c680ee606 100644
--- a/src/Frontend/src/assets/main.css
+++ b/src/Frontend/src/assets/main.css
@@ -76,7 +76,6 @@ body {
 
 #main-content {
   padding-top: 40px;
-  padding-bottom: 50px;
   overflow: auto;
   flex: 1;
   display: flex;
diff --git a/src/Frontend/src/components/messages2/MessageView.vue b/src/Frontend/src/components/messages2/MessageView.vue
index d9d67f9fc..79db9229a 100644
--- a/src/Frontend/src/components/messages2/MessageView.vue
+++ b/src/Frontend/src/components/messages2/MessageView.vue
@@ -169,6 +169,18 @@ onMounted(() => {
 @import "../list.css";
 
 .container,
+section,
+.tab-contents,
+.tab-contents > div {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.container {
+  height: auto;
+}
+
 section,
 .tab-contents,
 .tab-contents > div {
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram.vue b/src/Frontend/src/components/messages2/SequenceDiagram.vue
index ed86c6886..a53db6d8b 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram.vue
@@ -18,29 +18,30 @@ onMounted(() => store.refreshConversation());
 </script>
 
 <template>
-  <div class="toolbar">
-    <a class="help-link" target="_blank" href="https://docs.particular.net/servicepulse/sequence-diagram"><i class="fa fa-info-circle" /> Sequence Diagram Help</a>
-  </div>
-  <div class="outer" @scroll="(ev) => (endpointYOffset = (ev.target as Element).scrollTop)">
-    <svg class="sequence-diagram" :style="{ width: `max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)` }" :height="maxHeight + 20">
-      <Timeline />
-      <Handlers />
-      <Routes />
-      <Endpoints :yOffset="endpointYOffset" />
-    </svg>
+  <div class="wrapper">
+    <div class="toolbar">
+      <a class="help-link" target="_blank" href="https://docs.particular.net/servicepulse/sequence-diagram"><i class="fa fa-info-circle" /> Sequence Diagram Help</a>
+    </div>
+    <div class="outer" @scroll="(ev) => (endpointYOffset = (ev.target as Element).scrollTop)">
+      <div class="inner">
+        <svg class="sequence-diagram" :style="{ width: `max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)` }" :height="maxHeight + 20">
+          <Timeline />
+          <Handlers />
+          <Routes />
+          <Endpoints :yOffset="endpointYOffset" />
+        </svg>
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .wrapper {
-  margin-top: 5px;
-  border-radius: 0.5rem;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-  background: white;
+  flex: 1;
   display: flex;
   flex-direction: column;
 }
+
 .toolbar {
   background-color: #f3f3f3;
   border: #8c8c8c 1px solid;
@@ -56,6 +57,15 @@ onMounted(() => store.refreshConversation());
   max-width: 100%;
   max-height: 100%;
   overflow: auto;
+  position: relative;
+  flex: 1;
+}
+.inner {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
 }
 
 .sequence-diagram {

From 0f887340b187bcad3dc83ea2c2a658f7d012e2b2 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 2 May 2025 13:45:21 +0800
Subject: [PATCH 8/9] header stickyness

---
 src/Frontend/src/assets/main.css              |   1 +
 src/Frontend/src/components/TabsLayout.vue    |  10 +-
 .../messages2/FlowDiagram/FlowDiagram.vue     |   1 -
 .../src/components/messages2/HeadersView.vue  |   7 +-
 .../src/components/messages2/MessageView.vue  | 105 ++++++++++--------
 5 files changed, 72 insertions(+), 52 deletions(-)

diff --git a/src/Frontend/src/assets/main.css b/src/Frontend/src/assets/main.css
index c680ee606..82df8af25 100644
--- a/src/Frontend/src/assets/main.css
+++ b/src/Frontend/src/assets/main.css
@@ -80,6 +80,7 @@ body {
   flex: 1;
   display: flex;
   flex-direction: column;
+  --main-background: #f2f6f7;
 }
 
 h1 {
diff --git a/src/Frontend/src/components/TabsLayout.vue b/src/Frontend/src/components/TabsLayout.vue
index 184ab6fd6..26a26b693 100644
--- a/src/Frontend/src/components/TabsLayout.vue
+++ b/src/Frontend/src/components/TabsLayout.vue
@@ -37,4 +37,12 @@ watch(
   </keep-alive>
 </template>
 
-<style scoped></style>
+<style scoped>
+.tabs {
+  position: sticky;
+  top: 7.7rem;
+  z-index: 1;
+  margin-bottom: 1px;
+  background-color: var(--main-background);
+}
+</style>
diff --git a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
index 8de4ed34f..23dd8ce06 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
@@ -271,7 +271,6 @@ const selectedErrorColor = hexToCSSFilter("#e8e6e8").filter;
 @import "../../list.css";
 
 .gap {
-  margin-top: 5px;
   border-radius: 0.5rem;
   padding: 0.5rem;
   border: 1px solid #ccc;
diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue
index 7b6ff2776..c1fe4a8d0 100644
--- a/src/Frontend/src/components/messages2/HeadersView.vue
+++ b/src/Frontend/src/components/messages2/HeadersView.vue
@@ -75,10 +75,13 @@ const filteredHeaders = computed(() => {
   max-width: 40rem;
 }
 .filters {
-  background-color: #f3f3f3;
+  background-color: var(--main-background);
   border: #8c8c8c 1px solid;
   border-radius: 3px;
   padding: 5px;
+  position: sticky;
+  top: 9.7rem;
+  z-index: 1;
 }
 
 .header-list {
@@ -89,7 +92,7 @@ const filteredHeaders = computed(() => {
   align-items: flex-start;
   justify-content: center;
   row-gap: 2px;
-  background-color: #f3f3f3;
+  background-color: var(--main-background);
 }
 
 .header-value,
diff --git a/src/Frontend/src/components/messages2/MessageView.vue b/src/Frontend/src/components/messages2/MessageView.vue
index 79db9229a..be95e7685 100644
--- a/src/Frontend/src/components/messages2/MessageView.vue
+++ b/src/Frontend/src/components/messages2/MessageView.vue
@@ -100,58 +100,60 @@ onMounted(() => {
       <no-data v-else-if="state.failed_to_load" title="message failures" message="An error occurred while trying to load the message. Please check the ServiceControl logs to learn what the issue is."></no-data>
       <template v-else>
         <LoadingOverlay v-if="state.loading ?? false" />
-        <div class="row">
-          <div class="col-sm-12 no-side-padding">
-            <RouterLink :to="backLink"><i class="fa fa-chevron-left"></i> Back</RouterLink>
-            <div class="active break group-title">
-              <h1 class="message-type-title">{{ state.data.message_type }}</h1>
+        <div class="header-and-metadata">
+          <div class="row">
+            <div class="col-sm-12 no-side-padding">
+              <RouterLink :to="backLink"><i class="fa fa-chevron-left"></i> Back</RouterLink>
+              <div class="active break group-title">
+                <h1 class="message-type-title">{{ state.data.message_type }}</h1>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-12 no-side-padding">
-            <div class="metadata group-message-count message-metadata">
-              <MetadataLabel v-if="state.data.failure_status.retry_in_progress" tooltip="Message is being added to the retries queue" type="info" text="Requesting retry..." />
-              <MetadataLabel v-if="state.data.failure_status.retried" tooltip="Message is enqueued to be retried" type="info" text="Waiting for retry" />
-              <MetadataLabel v-if="state.data.failure_status.restoring" tooltip="Message is being restored" type="info" text="Restoring..." />
-              <MetadataLabel v-if="state.data.failure_status.archiving" tooltip="Message is being deleted" type="info" text="Deleting..." />
-              <MetadataLabel v-if="state.data.failure_status.archived" tooltip="Message is deleted" type="warning" text="Deleted" />
-              <MetadataLabel v-if="state.data.failure_status.resolved" tooltip="Message was processed successfully" type="warning" text="Processed" />
-              <MetadataLabel
-                v-if="state.data.failure_metadata.number_of_processing_attempts !== undefined && state.data.failure_metadata.number_of_processing_attempts > 1"
-                :tooltip="`This message has already failed ${state.data.failure_metadata.number_of_processing_attempts} times`"
-                type="important"
-                :text="`${(state.data.failure_metadata.number_of_processing_attempts ?? 0) - 1} Retry Failures`"
-              />
-              <template v-if="state.data.failure_metadata.edited">
-                <MetadataLabel tooltip="Message was edited" type="info" text="Edited" />
-                <span v-if="state.data.failure_metadata.edit_of" class="metadata metadata-link">
-                  <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(state.data.failure_metadata.edit_of), query: route.query }">View previous version</RouterLink>
-                </span>
-              </template>
-              <span v-if="state.data.failure_metadata.time_of_failure" class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :date-utc="state.data.failure_metadata.time_of_failure"></time-since></span>
-              <span v-else class="metadata"><i class="fa fa-clock-o"></i> Processed at: <time-since :date-utc="state.data.processed_at"></time-since></span>
-              <template v-if="state.data.receiving_endpoint">
-                <span class="metadata"><i class="fa pa-endpoint" :style="{ filter: endpointColor }"></i> Endpoint: {{ state.data.receiving_endpoint.name }}</span>
-                <span class="metadata"><i class="fa fa-laptop"></i> Machine: {{ state.data.receiving_endpoint.host }}</span>
-              </template>
-              <span v-if="state.data.failure_metadata.redirect" class="metadata"><i class="fa pa-redirect-source pa-redirect-small"></i> Redirect: {{ state.data.failure_metadata.redirect }}</span>
-              <template v-if="state.data.failure_status.archived">
-                <span class="metadata"><i class="fa fa-clock-o"></i> Deleted: <time-since :date-utc="state.data.failure_metadata.last_modified"></time-since></span>
-                <span class="metadata danger" v-if="state.data.failure_status.delete_soon"><i class="fa fa-trash-o danger"></i> Scheduled for permanent deletion: immediately</span>
-                <span class="metadata danger" v-else><i class="fa fa-trash-o danger"></i> Scheduled for permanent deletion: <time-since :date-utc="state.data.failure_metadata.deleted_in"></time-since></span>
-              </template>
+          <div class="row">
+            <div class="col-sm-12 no-side-padding">
+              <div class="metadata group-message-count message-metadata">
+                <MetadataLabel v-if="state.data.failure_status.retry_in_progress" tooltip="Message is being added to the retries queue" type="info" text="Requesting retry..." />
+                <MetadataLabel v-if="state.data.failure_status.retried" tooltip="Message is enqueued to be retried" type="info" text="Waiting for retry" />
+                <MetadataLabel v-if="state.data.failure_status.restoring" tooltip="Message is being restored" type="info" text="Restoring..." />
+                <MetadataLabel v-if="state.data.failure_status.archiving" tooltip="Message is being deleted" type="info" text="Deleting..." />
+                <MetadataLabel v-if="state.data.failure_status.archived" tooltip="Message is deleted" type="warning" text="Deleted" />
+                <MetadataLabel v-if="state.data.failure_status.resolved" tooltip="Message was processed successfully" type="warning" text="Processed" />
+                <MetadataLabel
+                  v-if="state.data.failure_metadata.number_of_processing_attempts !== undefined && state.data.failure_metadata.number_of_processing_attempts > 1"
+                  :tooltip="`This message has already failed ${state.data.failure_metadata.number_of_processing_attempts} times`"
+                  type="important"
+                  :text="`${(state.data.failure_metadata.number_of_processing_attempts ?? 0) - 1} Retry Failures`"
+                />
+                <template v-if="state.data.failure_metadata.edited">
+                  <MetadataLabel tooltip="Message was edited" type="info" text="Edited" />
+                  <span v-if="state.data.failure_metadata.edit_of" class="metadata metadata-link">
+                    <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(state.data.failure_metadata.edit_of), query: route.query }">View previous version</RouterLink>
+                  </span>
+                </template>
+                <span v-if="state.data.failure_metadata.time_of_failure" class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :date-utc="state.data.failure_metadata.time_of_failure"></time-since></span>
+                <span v-else class="metadata"><i class="fa fa-clock-o"></i> Processed at: <time-since :date-utc="state.data.processed_at"></time-since></span>
+                <template v-if="state.data.receiving_endpoint">
+                  <span class="metadata"><i class="fa pa-endpoint" :style="{ filter: endpointColor }"></i> Endpoint: {{ state.data.receiving_endpoint.name }}</span>
+                  <span class="metadata"><i class="fa fa-laptop"></i> Machine: {{ state.data.receiving_endpoint.host }}</span>
+                </template>
+                <span v-if="state.data.failure_metadata.redirect" class="metadata"><i class="fa pa-redirect-source pa-redirect-small"></i> Redirect: {{ state.data.failure_metadata.redirect }}</span>
+                <template v-if="state.data.failure_status.archived">
+                  <span class="metadata"><i class="fa fa-clock-o"></i> Deleted: <time-since :date-utc="state.data.failure_metadata.last_modified"></time-since></span>
+                  <span class="metadata danger" v-if="state.data.failure_status.delete_soon"><i class="fa fa-trash-o danger"></i> Scheduled for permanent deletion: immediately</span>
+                  <span class="metadata danger" v-else><i class="fa fa-trash-o danger"></i> Scheduled for permanent deletion: <time-since :date-utc="state.data.failure_metadata.deleted_in"></time-since></span>
+                </template>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-12 no-side-padding">
-            <div class="btn-toolbar message-toolbar">
-              <DeleteMessageButton />
-              <RestoreMessageButton />
-              <RetryMessageButton />
-              <EditAndRetryButton />
-              <ExportMessageButton />
+          <div class="row">
+            <div class="col-sm-12 no-side-padding">
+              <div class="btn-toolbar message-toolbar">
+                <DeleteMessageButton />
+                <RestoreMessageButton />
+                <RetryMessageButton />
+                <EditAndRetryButton />
+                <ExportMessageButton />
+              </div>
             </div>
           </div>
         </div>
@@ -191,6 +193,13 @@ section,
   flex: 1;
 }
 
+.header-and-metadata {
+  position: sticky;
+  top: -2.5rem;
+  z-index: 1;
+  background-color: var(--main-background);
+}
+
 h1.message-type-title {
   margin: 0 0 8px;
   font-size: 24px;

From ed60f8305e166fb4c86e5b531853dda5b6a6e457 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 2 May 2025 13:54:08 +0800
Subject: [PATCH 9/9] sticky toolbar for stacktrace and message body

---
 src/Frontend/src/components/CodeEditor.vue               | 7 ++++++-
 src/Frontend/src/components/messages2/BodyView.vue       | 2 +-
 src/Frontend/src/components/messages2/StacktraceView.vue | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/Frontend/src/components/CodeEditor.vue b/src/Frontend/src/components/CodeEditor.vue
index 8bd90bb8d..f8765aff8 100644
--- a/src/Frontend/src/components/CodeEditor.vue
+++ b/src/Frontend/src/components/CodeEditor.vue
@@ -20,6 +20,7 @@ const props = withDefaults(
     showCopyToClipboard?: boolean;
     ariaLabel?: string;
     css?: string;
+    toolbarStickyHeight?: string;
   }>(),
   { readOnly: true, showGutter: true, showCopyToClipboard: true }
 );
@@ -50,7 +51,7 @@ const extensions = computed(() => {
 </script>
 
 <template>
-  <div v-if="props.showCopyToClipboard || $slots.toolbarLeft || $slots.toolbarRight" class="toolbar">
+  <div v-if="props.showCopyToClipboard || $slots.toolbarLeft || $slots.toolbarRight" :class="{ toolbar: true, sticky: props.toolbarStickyHeight != null }" :style="{ top: props.toolbarStickyHeight }">
     <div><slot name="toolbarLeft"></slot></div>
     <div>
       <slot name="toolbarRight"></slot>
@@ -82,6 +83,10 @@ const extensions = computed(() => {
   justify-content: space-between;
   align-items: center;
 }
+.toolbar.sticky {
+  position: sticky;
+  z-index: 1;
+}
 .clipboard {
   margin-left: 0.5rem;
 }
diff --git a/src/Frontend/src/components/messages2/BodyView.vue b/src/Frontend/src/components/messages2/BodyView.vue
index 9660a95f6..a82897155 100644
--- a/src/Frontend/src/components/messages2/BodyView.vue
+++ b/src/Frontend/src/components/messages2/BodyView.vue
@@ -24,6 +24,6 @@ const body = computed(() => bodyState.value.data.value);
   <div v-if="bodyState.not_found" class="alert alert-info">Could not find the message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
   <div v-else-if="bodyState.failed_to_load" class="alert alert-info">Message body unavailable.</div>
   <LoadingSpinner v-else-if="bodyState.loading" />
-  <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
+  <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true" toolbar-sticky-height="9.7rem"></CodeEditor>
   <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
 </template>
diff --git a/src/Frontend/src/components/messages2/StacktraceView.vue b/src/Frontend/src/components/messages2/StacktraceView.vue
index 8b04bcae2..51ba36be4 100644
--- a/src/Frontend/src/components/messages2/StacktraceView.vue
+++ b/src/Frontend/src/components/messages2/StacktraceView.vue
@@ -10,5 +10,5 @@ const { state } = storeToRefs(useMessageStore());
 <template>
   <div v-if="state.failed_to_load" class="alert alert-info">Stacktrace not available.</div>
   <LoadingSpinner v-else-if="state.loading" />
-  <CodeEditor v-else :model-value="state.data.failure_metadata.exception?.stack_trace!" language="powershell" :read-only="true" :show-gutter="false"></CodeEditor>
+  <CodeEditor v-else :model-value="state.data.failure_metadata.exception?.stack_trace!" language="powershell" :read-only="true" :show-gutter="false" toolbar-sticky-height="9.7rem" />
 </template>