From 183914f3512ed9510735f730325c736f5b849f68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Tue, 21 Dec 2021 22:48:30 +0100
Subject: [PATCH] fix whitespace ellipsis bug

---
 ui/src/components/utils/Ellipsis.svelte | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/utils/Ellipsis.svelte b/ui/src/components/utils/Ellipsis.svelte
index b29c29c..c48b4b4 100644
--- a/ui/src/components/utils/Ellipsis.svelte
+++ b/ui/src/components/utils/Ellipsis.svelte
@@ -1,11 +1,22 @@
 <script lang="ts">
   export let value: string;
+  let root: HTMLDivElement;
 
   $: valueStart = value.substring(0, value.length - 7);
   $: valueEnd = value.substring(value.length - 7, value.length);
+  
+  // If the break happens to be on a space, it gets collapsed; `white-space` CSS
+  // property doesn't help, and replacing the spaces in the strings gets escaped
+  // by Svelte; hence, direct manipulation of the DOM.
+  $: {
+    value;
+    Array.from(root?.children || []).forEach(
+      (el) => (el.innerHTML = el.innerHTML.replace(" ", "&nbsp;"))
+    );
+  }
 </script>
 
-<div class="ellipsis">
+<div class="ellipsis" bind:this={root}>
   <div class="start">{valueStart}</div>
   <div class="end">{valueEnd}</div>
 </div>