From fb4e014536a642932de9982d45c7af741f73fb74 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Wed, 20 Nov 2024 11:42:46 -0500
Subject: [PATCH] Handle overflowing tag contents Fixes #830

---
 src/lib/components/common/KV.svelte               |  1 +
 .../components/common/stories/KV.stories.svelte   | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/lib/components/common/KV.svelte b/src/lib/components/common/KV.svelte
index 261c30187..d8400cb0e 100644
--- a/src/lib/components/common/KV.svelte
+++ b/src/lib/components/common/KV.svelte
@@ -48,5 +48,6 @@
   .value {
     color: var(--blue-5, #153359);
     font-style: normal;
+    word-break: break-all;
   }
 </style>
diff --git a/src/lib/components/common/stories/KV.stories.svelte b/src/lib/components/common/stories/KV.stories.svelte
index ef9a2f6a1..620050f16 100644
--- a/src/lib/components/common/stories/KV.stories.svelte
+++ b/src/lib/components/common/stories/KV.stories.svelte
@@ -30,3 +30,18 @@
 <Story name="no link">
   <KV key="Project" value="Old Computer Project" />
 </Story>
+
+<Story name="Long Value">
+  <div class="constrain-width">
+    <KV
+      key="id"
+      value="f2a6eaad9a6ebf4753bacd1e9731f29d67c2b84b7098165d2ae9cb83797c52452d66f8d6c342fd29a4229c31b7cd55ad91324be9f897fe5a4b858055d2f0ec65"
+    />
+  </div>
+</Story>
+
+<style>
+  .constrain-width {
+    max-width: 20rem;
+  }
+</style>