From 14ea7fc0a5946520e90bc08a906c588fa505a269 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Wed, 4 May 2022 15:32:13 +0200
Subject: [PATCH] Web: Set titles for dt elements in tables

Since the cell has a fixed width and can be cropped.
---
 web/app/src/assets/base.css            | 4 ++++
 web/app/src/components/JobDetails.vue  | 4 ++--
 web/app/src/components/TaskDetails.vue | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 2f9d2ca4..d7dea881 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -151,6 +151,10 @@ dl {
 dl dt {
   font-weight: bold;
   text-align: right;
+  width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 dl dd {
diff --git a/web/app/src/components/JobDetails.vue b/web/app/src/components/JobDetails.vue
index 4654f0be..13533e6b 100644
--- a/web/app/src/components/JobDetails.vue
+++ b/web/app/src/components/JobDetails.vue
@@ -31,7 +31,7 @@
     <h3 class="sub-title" v-if="hasMetadata">Meta-data</h3>
     <dl>
       <template v-for="value, key in jobData.metadata">
-        <dt :class="`field-${key}`">{{ key }}</dt>
+        <dt :class="`field-${key}`" :title="key">{{ key }}</dt>
         <dd>{{ value }}</dd>
       </template>
     </dl>
@@ -39,7 +39,7 @@
     <h3 class="sub-title" v-if="hasSettings">Settings</h3>
     <dl>
       <template v-for="value, key in settingsToDisplay">
-        <dt :class="`field-${key}`">{{ key }}</dt>
+        <dt :class="`field-${key}`" :title="key">{{ key }}</dt>
         <dd>{{ value }}</dd>
       </template>
     </dl>
diff --git a/web/app/src/components/TaskDetails.vue b/web/app/src/components/TaskDetails.vue
index 05a5a2dc..21e29914 100644
--- a/web/app/src/components/TaskDetails.vue
+++ b/web/app/src/components/TaskDetails.vue
@@ -28,7 +28,7 @@
     <h3 class="sub-title">Commands</h3>
     <dl>
       <template v-for="cmd in taskData.commands">
-        <dt :class="`field-${cmd.name}`">{{ cmd.name }}</dt>
+        <dt :class="`field-${cmd.name}`" :title="cmd.name">{{ cmd.name }}</dt>
         <dd>{{ cmd.parameters }}</dd>
       </template>
     </dl>