Handle overflowing tag contents

Fixes #830
MuckRock · Nov 20, 2024 · fb4e014 · fb4e014
1 parent 317a064
commit fb4e014
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git 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
@@ -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>