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

@@ -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 {

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>

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>