ellipsis on contacts & tooltip on progress bar click (#2409)

* Update MiningTable.vue

* use Popover along side tooltip for progressbar

Author: J43fura

frontend/src/components/Mining/Table/MiningTable.vue

@@ -251,23 +251,25 @@
         </div>
       </template>
       <template #body="{ data }">
-        <div class="flex items-center justify-between gap-2">
-          <div class="max-w-[70vw] flex items-center gap-2">
+        <div class="flex items-center justify-between gap-2 w-full min-w-0">
+          <div class="flex items-center gap-2 min-w-0">
             <Image
               v-if="data.image && visibleColumns.includes('image')"
               :src="getImageViaProxy(data.image)"
               class="cursor-pointer flex-none"
               image-class="size-12 rounded-full"
               @click="openContactInformation(data)"
             />
-            <div class="truncate">
+
+            <div class="min-w-0">
               <div
                 v-if="data.name && visibleColumns.includes('name')"
-                class="truncate w-min cursor-pointer"
+                class="truncate cursor-pointer"
                 @click="openContactInformation(data)"
               >
                 {{ data.name }}
               </div>
+
               <div
                 class="truncate cursor-pointer"
                 :class="{
@@ -281,12 +283,13 @@
               </div>
             </div>
 
+            <!-- RIGHT -->
             <div
               v-if="
                 (data.same_as && visibleColumns.includes('same_as')) ||
                 (data.telephone && visibleColumns.includes('telephone'))
               "
-              class="flex md:hidden gap-2"
+              class="flex md:hidden gap-2 flex-shrink-0"
             >
               <template
                 v-if="data.telephone && visibleColumns.includes('telephone')"
@@ -308,13 +311,14 @@
               </template>
             </div>
           </div>
-          <div class="flex items-center">
+
+          <div class="flex items-center gap-2 flex-shrink-0">
             <div
               v-if="
                 (data.same_as && visibleColumns.includes('same_as')) ||
                 (data.telephone && visibleColumns.includes('telephone'))
               "
-              class="hidden md:flex gap-2"
+              class="hidden md:flex gap-2 flex-shrink-0"
             >
               <template
                 v-if="data.telephone && visibleColumns.includes('telephone')"

frontend/src/components/ProgressCard.vue

@@ -26,7 +26,12 @@
     class="mb-6"
     :value="progressValue"
     :mode="props.mode"
+    @click="togglePopover"
   />
+
+  <Popover ref="popoverRef" class="whitespace-pre-line">
+    {{ props.progressTooltip }}
+  </Popover>
 </template>
 
 <script setup lang="ts">
@@ -36,6 +41,10 @@ const { t } = useI18n({
   useScope: 'local',
 });
 
+const popoverRef = ref();
+function togglePopover(event: Event) {
+  popoverRef.value.toggle(event);
+}
 const MIN_PROGRESS_FOR_ESTIMATION = 0.05; // wait 5% progress for estimation
 const MIN_ELAPSED_FOR_ESTIMATION = 5 * 1000; // wait 5 seconds for estimation
 const SUFFICIENT_ITEMS_FOR_ESTIMATION = 100; // estimate right away if >=100 items treated