From 28ea6c6aa9c1c4b03355eea6c57b2dc8ec5b3ea8 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Thu, 1 May 2025 18:51:23 +0300
Subject: [PATCH] truncate oveflowing error text with option to display all on
 click

---
 ui/components/History.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/components/History.vue b/ui/components/History.vue
index 6fc7a96e..ee74d7a5 100644
--- a/ui/components/History.vue
+++ b/ui/components/History.vue
@@ -110,10 +110,10 @@
                   <div class="is-text-overflow" v-tooltip="item.title">
                     <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
                   </div>
-                  <div v-if="item.error">
+                  <div v-if="item.error" class="is-text-overflow is-pointer" @click="toggle_class($event)">
                     <span class="has-text-danger">{{ item.error }}</span>
                   </div>
-                  <div v-if="showMessage(item)">
+                  <div v-if="showMessage(item)" class="is-text-overflow is-pointer" @click="toggle_class($event)">
                     <span class="has-text-danger">{{ item.msg }}</span>
                   </div>
                 </td>
@@ -242,10 +242,14 @@
           <div class="card-content">
             <div class="columns is-mobile is-multiline">
               <div class="column is-12" v-if="item.error">
-                <span class="has-text-danger">{{ item.error }}</span>
+                <div class="is-text-overflow is-pointer" @click="toggle_class($event)">
+                  <span class="has-text-danger">{{ item.error }}</span>
+                </div>
               </div>
               <div class="column is-12" v-if="showMessage(item)">
-                <span class="has-text-danger">{{ item.msg }}</span>
+                <div class="is-text-overflow is-pointer" @click="toggle_class($event)">
+                  <span class="has-text-danger">{{ item.msg }}</span>
+                </div>
               </div>
               <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
                 <span class="icon-text">
@@ -686,4 +690,6 @@ const downloadSelected = () => {
     body.removeChild(link);
   }
 }
+
+const toggle_class = e => e.currentTarget.classList.toggle('is-text-overflow')
 </script>