From 3a159cb89b28b9820d4c27f44f8a05ee25f3240a Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 21 Jan 2025 08:40:03 -0800
Subject: [PATCH] fix: only truncate right the container name and not hostname
 (#3567)

---
 assets/components/LogViewer/LogItem.vue        | 2 +-
 assets/components/LogViewer/RandomColorTag.vue | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/assets/components/LogViewer/LogItem.vue b/assets/components/LogViewer/LogItem.vue
index aab49111..ad04a201 100644
--- a/assets/components/LogViewer/LogItem.vue
+++ b/assets/components/LogViewer/LogItem.vue
@@ -2,7 +2,7 @@
   <div class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
     <LogStd :std="logEntry.std" class="shrink-0 select-none" v-if="showStd" />
     <RandomColorTag class="shrink-0 select-none" :value="host.name" v-if="showHostname" />
-    <RandomColorTag class="shrink-0 select-none" :value="container.name" v-if="showContainerName" />
+    <RandomColorTag class="shrink-0 select-none" :value="container.name" v-if="showContainerName" truncateRight />
     <LogDate :date="logEntry.date" v-if="showTimestamp" class="shrink-0 select-none" />
     <LogLevel
       class="flex select-none"
diff --git a/assets/components/LogViewer/RandomColorTag.vue b/assets/components/LogViewer/RandomColorTag.vue
index 41f49ace..13e30d75 100644
--- a/assets/components/LogViewer/RandomColorTag.vue
+++ b/assets/components/LogViewer/RandomColorTag.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="tag grid w-40 overflow-hidden rounded-sm text-center text-sm text-white">
     <div class="random-color col-start-1 row-start-1 brightness-75"></div>
-    <div class="col-start-1 row-start-1 truncate px-2 brightness-100 [direction:rtl]">{{ value }}</div>
+    <div class="col-start-1 row-start-1 truncate px-2 brightness-100" :class="truncateRight ? '[direction:rtl]' : ''">
+      {{ value }}
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -29,8 +31,9 @@ const colors = [
 ] as const;
 </script>
 <script lang="ts" setup>
-const { value } = defineProps<{
+const { value, truncateRight = false } = defineProps<{
   value: string;
+  truncateRight?: boolean;
 }>();
 
 const color = computed(() => colors[Math.abs(hashCode(value)) % colors.length]);