From 5e481c6ea2d49efcd3995f17c2732398028d82c6 Mon Sep 17 00:00:00 2001
From: Jan Sandbrink <j.sandbrink@openproject.com>
Date: Wed, 9 Jul 2025 08:38:57 +0200
Subject: [PATCH] Improve readability of webhook responses

Previously we hardcoded a light background for the <pre> element
of webhook responses, which obviously didn't work. Removing that
color alone would have left the <pre> sections mostly invisible,
aside from the font change they performed. By adding the op-uc-code-block
class to them, they received an outline and some additional styling
like you would see them in a work package.
---
 frontend/src/global_styles/content/modules/_webhooks.sass   | 1 -
 .../outgoing/deliveries/response_component.html.erb         | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/global_styles/content/modules/_webhooks.sass b/frontend/src/global_styles/content/modules/_webhooks.sass
index 7c189ffe121..a01f13551a9 100644
--- a/frontend/src/global_styles/content/modules/_webhooks.sass
+++ b/frontend/src/global_styles/content/modules/_webhooks.sass
@@ -27,7 +27,6 @@
   min-width: 25vw
 
   pre
-    background: #f1f1f1
     padding: 5px
 
 
diff --git a/modules/webhooks/app/components/webhooks/outgoing/deliveries/response_component.html.erb b/modules/webhooks/app/components/webhooks/outgoing/deliveries/response_component.html.erb
index d638d0ded74..8309ad876a0 100644
--- a/modules/webhooks/app/components/webhooks/outgoing/deliveries/response_component.html.erb
+++ b/modules/webhooks/app/components/webhooks/outgoing/deliveries/response_component.html.erb
@@ -13,10 +13,10 @@
     <div class="spot-divider"></div>
     <div class="spot-modal--body spot-container">
       <h2 class="spot-subheader-extra-small">Headers</h2>
-      <pre class="webhooks--response-headers"><%- response_headers.each do |k, v| -%><strong><%= h k -%></strong>:  <span><%= h v -%></span><br><%- end -%></pre>
-        <div class="spot-divider"></div>
+      <pre class="op-uc-code-block webhooks--response-headers"><%- response_headers.each do |k, v| -%><strong><%= h k -%></strong>:  <span><%= h v -%></span><br><%- end -%></pre>
+      <div class="spot-divider"></div>
       <h2 class="spot-subheader-extra-small">Response body</h2>
-      <pre class="webhooks--response-body"><%= response_body %></pre>
+      <pre class="op-uc-code-block webhooks--response-body"><%= response_body %></pre>
     </div>
     <div class="spot-action-bar hidden-for-mobile">
       <div class="spot-action-bar--right">