fix: only truncate right the container name and not hostname (#3567)

Author: amir20

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"

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]);