Web: Positive wording text for Job/Task Details

Also, do not mention left/right on labels since the position of sections
can vary (for example on smaller screens).

web/app/src/assets/base.css

@@ -10,6 +10,7 @@
   --color-accent-background: hsl(237deg 18% 28%);
   --color-text: #ddd;
   --color-text-muted: #999;
+  --color-text-hint: #555;
 
   --color-border: #222;
 
@@ -224,3 +225,13 @@ footer {
 .btn-bar .btn.dangerous[disabled] {
   background-color: #53413e;
 }
+
+.details-no-item-selected {
+  align-items: center;
+  color: var(--color-text-hint);
+  display: flex;
+  user-select: none;
+  height: 100%;
+  justify-content: center;
+  margin: auto;
+}

web/app/src/components/JobDetails.vue

@@ -45,8 +45,8 @@
     </dl>
   </template>
 
-  <div v-else class="no-job-selected">
-    <p>No job selected, pick one from the list on the left.</p>
+  <div v-else class="details-no-item-selected">
+    <p>Select a job to see its details.</p>
   </div>
 </template>
 

web/app/src/components/TaskDetails.vue

@@ -34,8 +34,8 @@
     </dl>
   </template>
 
-  <div v-else class="no-task-selected">
-    <p>No task selected, pick one from the list on the left.</p>
+  <div v-else class="details-no-item-selected">
+    <p>Select a task to see its details.</p>
   </div>
 </template>