From 59f80079aaa18e5ac7805ae049b08c306d843921 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 9 Apr 2025 16:49:22 +1000
Subject: [PATCH] Adding TextEllipses component

This is to deal with large text display
---
 src/Frontend/src/components/TextEllipses.vue | 53 ++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/Frontend/src/components/TextEllipses.vue

diff --git a/src/Frontend/src/components/TextEllipses.vue b/src/Frontend/src/components/TextEllipses.vue
new file mode 100644
index 000000000..bb589e449
--- /dev/null
+++ b/src/Frontend/src/components/TextEllipses.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    text: string;
+    ellipsesStyle?: "RightSide" | "LeftSide";
+  }>(),
+  { ellipsesStyle: "RightSide" }
+);
+
+const textContainer = ref<HTMLElement | null>(null);
+const tooltipText = ref("");
+
+const updateTooltip = () => {
+  if (textContainer.value) {
+    tooltipText.value = textContainer.value.scrollWidth > textContainer.value.clientWidth ? textContainer.value.textContent || "" : "";
+  }
+};
+
+onMounted(() => {
+  updateTooltip();
+});
+
+watch([() => props.text], () => {
+  updateTooltip();
+});
+</script>
+
+<template>
+  <div ref="textContainer" title="" class="text-container hackToPreventSafariFromShowingTooltip" :class="{ 'left-side-ellipsis': ellipsesStyle === 'LeftSide' }" v-tippy="{ content: tooltipText, maxWidth: 'none' }">
+    {{ text }}
+  </div>
+</template>
+
+<style scoped>
+.hackToPreventSafariFromShowingTooltip::after {
+  content: "";
+  display: block;
+}
+
+.left-side-ellipsis {
+  direction: rtl;
+  text-align: left;
+}
+
+.text-container {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
+</style>