From 6a04d29eed0c7a4cfee2812ee335c8ee79bd3798 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Mon, 27 Oct 2025 00:17:15 +0100
Subject: [PATCH] metadata

---
 frontend/src/detail/DetailPanel.jsx |  2 +-
 frontend/src/styles.css             | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index 4dabd2b..d5bcda6 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -1104,7 +1104,7 @@ const DetailPanel = ({
         {metadata && (
           <div>
             <dt>Metadata</dt>
-            <pre>{JSON.stringify(metadata, null, 2)}</pre>
+            <pre className="detail-metadata__block">{JSON.stringify(metadata, null, 2)}</pre>
           </div>
         )}
         {hasOcrAsset && ocrOpen
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index cbb246e..34d2565 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -2035,6 +2035,19 @@ button.danger:hover:not([disabled]) {
   margin-top: 0.5rem;
 }
 
+.detail-metadata__block {
+  margin: 0.35rem 0 0;
+  padding: 0.5rem 0.6rem;
+  background: var(--surface-soft);
+  border-radius: 4px;
+  border: 1px solid var(--border-muted, var(--border));
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
 .tag-pill {
   display: inline-flex;
   align-items: center;