diff --git a/changes.d/2265.feat.md b/changes.d/2265.feat.md
new file mode 100644
index 000000000..bf3ea826e
--- /dev/null
+++ b/changes.d/2265.feat.md
@@ -0,0 +1 @@
+Improved the legibility of job details in the tree view and added a job details menu to the log view.
diff --git a/src/components/cylc/common/JobDetails.vue b/src/components/cylc/common/JobDetails.vue
new file mode 100644
index 000000000..3a490a250
--- /dev/null
+++ b/src/components/cylc/common/JobDetails.vue
@@ -0,0 +1,83 @@
+<!--
+Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <v-table data-cy="job-details">
+    <thead v-if="$slots.header">
+      <tr>
+        <th colspan="2">
+          <slot name="header"></slot>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>State</td>
+        <td>{{ node.state }}</td>
+      </tr>
+      <tr>
+        <td>Platform</td>
+        <td>{{ node.platform }}</td>
+      </tr>
+      <tr>
+        <td>Job ID</td>
+        <td>{{ node.jobId }}</td>
+      </tr>
+      <tr>
+        <td>Job runner</td>
+        <td>{{ node.jobRunnerName }}</td>
+      </tr>
+      <tr>
+        <td>Submitted time</td>
+        <td>{{ node.submittedTime }}</td>
+      </tr>
+      <tr>
+        <td>Started time</td>
+        <td>{{ node.startedTime }}</td>
+      </tr>
+      <tr>
+        <td>Finished time</td>
+        <td>{{ node.finishedTime }}</td>
+      </tr>
+      <tr v-if="meanElapsedTime">
+        <td>Mean run time</td>
+        <td>{{ formatDuration(meanElapsedTime) }}</td>
+      </tr>
+    </tbody>
+  </v-table>
+</template>
+
+<script setup>
+import { formatDuration } from '@/utils/tasks'
+
+defineProps({
+  node: {
+    type: Object,
+    required: true,
+  },
+  meanElapsedTime: {
+    type: Number,
+  },
+})
+</script>
+
+<style scoped>
+table td:first-of-type {
+  font-weight: 500;
+  cursor: default;
+}
+</style>
diff --git a/src/components/cylc/tree/JobDetails.vue b/src/components/cylc/tree/JobDetails.vue
deleted file mode 100644
index 4d93c6e81..000000000
--- a/src/components/cylc/tree/JobDetails.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<!--
-Copyright (C) NIWA & British Crown (Met Office) & Contributors.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div
-    :id="`${node.id}-job-details`"
-    class="node leaf job-details mb-2"
-  >
-    <div class="arrow-up" :style="leafTriangleStyle"></div>
-    <div class="leaf-data font-weight-light py-4">
-      <div
-        v-for="item in leafProperties"
-        :key="item.title"
-        class="leaf-entry px-5"
-      >
-        <span class="leaf-entry-title">{{ item.title }}</span>
-        <span class="text-grey-darken-1 leaf-entry-value">{{ item.property }}</span>
-      </div>
-      <v-divider class="mx-5" />
-      <div class="leaf-entry px-5">
-        <span class="leaf-entry-title text-grey-darken-1">Outputs</span>
-      </div>
-      <div
-        v-if="jobMessageOutputs?.length"
-        class="leaf-outputs-entry"
-      >
-        <div
-          v-for="customOutput of jobMessageOutputs"
-          :key="customOutput.label"
-          class="leaf-entry output px-5"
-        >
-          <span class="leaf-entry-title">{{ customOutput.label }}</span>
-          <span class="text-grey-darken-1 leaf-entry-value">{{ customOutput.message }}</span>
-        </div>
-      </div>
-      <div
-        v-else
-        class="leaf-entry px-5"
-      >
-        <span class="leaf-entry-title text-grey-darken-1">No custom messages</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getIndent } from '@/components/cylc/tree/util'
-import {
-  formatDuration,
-  jobMessageOutputs
-} from '@/utils/tasks'
-
-export default {
-  name: 'JobDetails',
-
-  props: {
-    node: {
-      type: Object,
-      required: true,
-    },
-    /** Indent level */
-    depth: {
-      type: Number,
-      required: true,
-    },
-    meanElapsedTime: {
-
-    }
-  },
-
-  computed: {
-    /** Make the job details triangle point to the job icon */
-    leafTriangleStyle () {
-      return {
-        'margin-left': getIndent(this.depth),
-      }
-    },
-
-    leafProperties () {
-      return [
-        {
-          title: 'Platform',
-          property: this.node.node.platform,
-        },
-        {
-          title: 'Job ID',
-          property: this.node.node.jobId,
-        },
-        {
-          title: 'Job runner',
-          property: this.node.node.jobRunnerName,
-        },
-        {
-          title: 'Submitted',
-          property: this.node.node.submittedTime,
-        },
-        {
-          title: 'Started',
-          property: this.node.node.startedTime,
-        },
-        {
-          title: 'Finished',
-          property: this.node.node.finishedTime,
-        },
-        {
-          title: 'Mean run time',
-          property: formatDuration(this.meanElapsedTime),
-        },
-      ]
-    },
-
-    jobMessageOutputs () {
-      return jobMessageOutputs(this.node)
-    },
-  },
-}
-</script>
diff --git a/src/components/cylc/tree/JobLeaf.vue b/src/components/cylc/tree/JobLeaf.vue
new file mode 100644
index 000000000..e2efa6d8d
--- /dev/null
+++ b/src/components/cylc/tree/JobLeaf.vue
@@ -0,0 +1,94 @@
+<!--
+Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div
+    :id="`${node.id}-job-details`"
+    class="node leaf job-details mb-2"
+  >
+    <div class="arrow-up" :style="leafTriangleStyle"></div>
+    <div class="leaf-data pa-2 rounded-lg">
+      <v-defaults-provider :defaults="defaults">
+        <JobDetailsTable
+          :node="node.node"
+          :mean-elapsed-time="meanElapsedTime"
+          class="bg-transparent"
+        />
+        <v-table
+          v-if="customOutputs?.length"
+          class="outputs mt-2 bg-white"
+        >
+          <thead>
+            <tr>
+              <th>Custom output</th>
+              <th>Message</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="customOutput of customOutputs"
+              :key="customOutput.label"
+            >
+              <td>{{ customOutput.isMessage ? '--' : customOutput.label }}</td>
+              <td>{{ customOutput.message }}</td>
+            </tr>
+          </tbody>
+        </v-table>
+      </v-defaults-provider>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { getIndent } from '@/components/cylc/tree/util'
+import { jobMessageOutputs } from '@/utils/tasks'
+import JobDetailsTable from '@/components/cylc/common/JobDetails.vue'
+
+const props = defineProps({
+  node: {
+    type: Object,
+    required: true,
+  },
+  /** Indent level */
+  depth: {
+    type: Number,
+    required: true,
+  },
+  meanElapsedTime: {
+    type: Number,
+  },
+  density: {
+    type: String,
+    default: 'compact'
+  }
+})
+
+/** Make the job details triangle point to the job icon */
+const leafTriangleStyle = computed(() => ({
+  'margin-left': getIndent(props.depth),
+}))
+
+const defaults = computed(() => ({
+  VTable: {
+    density: props.density,
+    hover: true,
+  }
+}))
+
+const customOutputs = computed(() => jobMessageOutputs(props.node))
+</script>
diff --git a/src/components/cylc/tree/TreeItem.vue b/src/components/cylc/tree/TreeItem.vue
index 0acbcd41f..7f2c90f7b 100644
--- a/src/components/cylc/tree/TreeItem.vue
+++ b/src/components/cylc/tree/TreeItem.vue
@@ -121,9 +121,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :key="`${customOutput.label}-${index}`"
                   :class="customOutput.isMessage ? 'bg-light-grey text-black' : 'bg-grey text-white'"
                   class="message-output"
+                  v-tooltip="customOutput.isMessage ? `Task message: ${customOutput.message}` : customOutput.message"
                 >
-                  {{ customOutput.label }}
-                  <v-tooltip :text="customOutput.message"/>
+                  {{ customOutput.isMessage ? customOutput.message : customOutput.label }}
                 </v-chip>
                 <v-chip
                   v-if="jobMessageOutputs.length > 5"
@@ -148,7 +148,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <slot name="child">
         <!-- Need v-if to prevent render of fallback content when slot is provided but is empty -->
         <template v-if="!$slots.child">
-          <JobDetails
+          <JobLeaf
             v-if="node.type === 'job'"
             v-bind="{ node, meanElapsedTime }"
             :depth="depth + 1"
@@ -175,7 +175,7 @@ import {
 } from '@mdi/js'
 import Task from '@/components/cylc/Task.vue'
 import Job from '@/components/cylc/Job.vue'
-import JobDetails from '@/components/cylc/tree/JobDetails.vue'
+import JobLeaf from '@/components/cylc/tree/JobLeaf.vue'
 import {
   jobMessageOutputs,
   latestJob,
@@ -193,7 +193,7 @@ export default {
     FlowNumsChip,
     Task,
     Job,
-    JobDetails,
+    JobLeaf,
   },
 
   props: {
diff --git a/src/services/mock/json/index.cjs b/src/services/mock/json/index.cjs
index 451a024ce..15bb30871 100644
--- a/src/services/mock/json/index.cjs
+++ b/src/services/mock/json/index.cjs
@@ -20,7 +20,7 @@ const taskProxy = require('./taskProxy.json')
 const familyProxy = require('./familyProxy.json')
 const { one, workflows, Workflow } = require('./workflows/index.cjs')
 const { LogData } = require('./logData.cjs')
-const { LogFiles, JobState } = require('./logFiles.cjs')
+const { LogFiles, Jobs } = require('./logFiles.cjs')
 const analysisQuery = require('./analysisQuery.json')
 const ganttQuery = require('./ganttQuery.json')
 const InfoViewSubscription = require('./infoView.json')
@@ -31,7 +31,7 @@ module.exports = {
   familyProxy,
   LogData,
   LogFiles,
-  JobState,
+  Jobs,
   App: workflows,
   Workflow,
   GraphIQLTest: one,
diff --git a/src/services/mock/json/logFiles.cjs b/src/services/mock/json/logFiles.cjs
index 84fc3861f..50ffbf799 100644
--- a/src/services/mock/json/logFiles.cjs
+++ b/src/services/mock/json/logFiles.cjs
@@ -55,7 +55,7 @@ const LogFiles = async ({ id }) => {
  *
  * @param {{ id: string }} variables
  */
-const JobState = async ({ id, workflowId }) => {
+const Jobs = async ({ id, workflowId }) => {
   if (!workflowId.startsWith('~')) {
     workflowId = `~user/${workflowId}`
   }
@@ -65,17 +65,17 @@ const JobState = async ({ id, workflowId }) => {
   ).replace(
     /\/(\d+)$/, (match, p1) => `/${parseInt(p1)}` // strips leading zeroes
   )
-  const { state } = deltas?.added?.jobs?.find((job) => job.id.includes(searchID)) ?? {}
+  const node = deltas?.added?.jobs?.find((job) => job.id.includes(searchID)) ?? {}
   await simulatedDelay(500)
   return {
     data: {
-      jobs: state ? [{ id, state }] : []
+      jobs: node.state ? [{ id, ...node }] : []
     }
   }
 }
 
 module.exports = {
-  JobState,
+  Jobs,
   LogFiles,
   deletedFile,
   jobLogFiles,
diff --git a/src/styles/cylc/_tree.scss b/src/styles/cylc/_tree.scss
index 573e7a622..52e22afe2 100644
--- a/src/styles/cylc/_tree.scss
+++ b/src/styles/cylc/_tree.scss
@@ -19,18 +19,15 @@
  @use '../settings';
 
 $active-color: #BDD5F7;
-/**
- * Height of each line/row in the tree. Same as saying “each node in the tree has
- * $line-height height”.
- */
+/** Height of each line/row in the tree. */
 $line-height: 1.8em;
 /**
  * The number of visible outputs in the job info box, under the “outputs” header.
- * This value is used with $line-height to calculate the maximum height of the
+ * This value is used to calculate the maximum height of the
  * outputs container. Change this value to 10, and you will have 10 visible outputs
  * in the job info, the remaining outputs being accessible through a scroll.
  */
-$visible-outputs: 5;
+$visible-outputs: 6;
 
 // Task/job/expand/collapse icon width
 $icon-width: 1.5rem;
@@ -122,34 +119,23 @@ $icon-width: 1.5rem;
       border-left: $arrow-size solid transparent;
       border-right: $arrow-size solid transparent;
       border-bottom: $arrow-size solid $leaf-background-color;
-      display: flex;
-      flex-wrap: nowrap;
     }
     .leaf-data {
-      display: flex;
-      flex-wrap: nowrap;
-      flex-direction: column;
       background-color: $leaf-background-color;
-      .leaf-entry {
-        display: flex;
-        flex-wrap: nowrap;
-        .leaf-entry-title {
-          // This is the minimum width of the left part in a leaf entry, with the title
-          // ATW the longest text is "latest message". This may need some tweaking. It
-          // would be much simpler if we could rely on flex+row, but we have to create
-          // two elements, and use a v-for with Vue. The v-for element creates an extra
-          // wrapper that stops us of being able to use a single parent with display: flex
-          min-width: 150px;
-        }
-        .leaf-entry-value {
-          white-space: nowrap;
+      table {
+        td, th {
+          &:first-of-type {
+            // This is the minimum width of the left part in a leaf entry.
+            // This may need some tweaking.
+            width: 12em;
+          }
         }
       }
-      .leaf-outputs-entry {
-        // 5 outputs, plus a buffer of 1.0em that appears to give the scroll just the
+      .outputs {
+        // N outputs, plus a buffer to give the scroll just the
         // right space to show the N items in the scroll (without the buffer the last
         // item is partially hidden).
-        max-height: calc($line-height * $visible-outputs + 1.0em);
+        max-height: calc(var(--v-table-row-height) * ($visible-outputs + 0.5));
         overflow-y: auto;
       }
     }
diff --git a/src/utils/tasks.js b/src/utils/tasks.js
index bf6cd4734..e983cdb30 100644
--- a/src/utils/tasks.js
+++ b/src/utils/tasks.js
@@ -79,8 +79,8 @@ export function jobMessageOutputs (jobNode) {
     )
     ret.push({
       level: undefined, // TODO: https://github.com/cylc/cylc-ui/pull/1436
-      label: messageOutput?.label ?? message,
-      message: messageOutput?.message ?? `Task message: ${message}`,
+      label: messageOutput?.label,
+      message: messageOutput?.message ?? message,
       isMessage: !messageOutput,
     })
   }
diff --git a/src/views/Log.vue b/src/views/Log.vue
index 2199b9419..95527ea14 100644
--- a/src/views/Log.vue
+++ b/src/views/Log.vue
@@ -69,7 +69,41 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :rules="[validateInputID]"
             placeholder="cycle/task/job"
             clearable
-          />
+          >
+            <template #prepend-inner>
+              <v-btn
+                :disabled="!relativeTokens || jobNode === false"
+                v-bind="toolbarBtnProps"
+                size="medium"
+                variant="plain"
+                @click="() => jobNode ?? fetchJobData()"
+                data-cy="job-info-btn"
+              >
+                <v-icon :icon="$options.icons.mdiInformationOutline"/>
+                <v-menu
+                  activator="parent"
+                  :close-on-content-click="false"
+                >
+                  <v-card class="pa-2">
+                    <v-skeleton-loader
+                      v-if="!jobNode"
+                      type="text@6"
+                    />
+                    <JobDetails
+                      v-else
+                      :node="jobNode"
+                      density="compact"
+                      hover
+                    >
+                      <template #header>
+                        {{ new Tokens(jobNode.id).relativeID }}
+                      </template>
+                    </JobDetails>
+                  </v-card>
+                </v-menu>
+              </v-btn>
+            </template>
+          </v-text-field>
           <v-text-field
             v-else
             data-cy="workflow-id-input"
@@ -181,6 +215,7 @@ import {
   mdiWrap,
   mdiFileAlertOutline,
   mdiMouseMoveDown,
+  mdiInformationOutline,
 } from '@mdi/js'
 import { btnProps } from '@/utils/viewToolbar'
 import graphqlMixin from '@/mixins/graphql'
@@ -200,6 +235,7 @@ import { debounce } from 'lodash-es'
 import CopyBtn from '@/components/core/CopyBtn.vue'
 import { Alert } from '@/model/Alert.model'
 import { getJobLogFileFromState } from '@/model/JobState.model'
+import JobDetails from '@/components/cylc/common/JobDetails.vue'
 import { useLogWordWrapDefault } from '@/composables/localStorage'
 
 /**
@@ -237,10 +273,16 @@ query LogFiles($id: ID!) {
  * @type {DocumentNode}
 */
 const JOB_QUERY = gql`
-query JobState($id: ID!, $workflowId: ID!) {
+query Jobs($id: ID!, $workflowId: ID!) {
   jobs (live: false, ids: [$id], workflows: [$workflowId]) {
     id
     state
+    platform
+    jobId
+    jobRunnerName
+    submittedTime
+    startedTime
+    finishedTime
   }
 }
 `
@@ -307,6 +349,7 @@ export default {
     CopyBtn,
     LogComponent,
     ViewToolbar,
+    JobDetails,
   },
   emits: [
     updateInitialOptionsEvent,
@@ -405,6 +448,7 @@ export default {
       inputID,
       validateInputID,
       relativeTokens,
+      Tokens,
       file,
       // the label for the file input
       fileLabel: ref('Select File'),
@@ -419,6 +463,7 @@ export default {
       reset,
       toolbarBtnSize,
       toolbarBtnProps: btnProps(toolbarBtnSize),
+      jobNode: ref(null),
     }
   },
 
@@ -513,12 +558,13 @@ export default {
       )
     },
     /**
-     * Query the job state and return the appropriate default log file based on the result.
+     * Query job data.
      *
-     * @returns {?string}
+     * @returns {Object|false} The job node, or false if no data/the query failed.
      */
-    async getDefaultJobLog () {
+    async fetchJobData () {
       let result
+      this.jobNode = null
       try {
         if (this.relativeTokens) {
           // get the latest job state
@@ -533,9 +579,10 @@ export default {
       } catch (err) {
         // the query failed
         console.error(err)
-        return
+        return false
       }
-      return getJobLogFileFromState(result?.data?.jobs?.[0]?.state)
+      this.jobNode = result?.data?.jobs?.[0] ?? false
+      return this.jobNode
     },
     /**
      * Get the default workflow log file from the given log filenames, if there is a
@@ -598,7 +645,9 @@ export default {
       if (this.jobLog && !initialLoad) {
         // (Don't query job state on initial load, as it will either be pre-populated or empty)
         promises.push(
-          this.getDefaultJobLog().then((result) => { this.file = result })
+          this.fetchJobData().then((result) => {
+            this.file = getJobLogFileFromState(result?.state)
+          })
         )
       }
       // Simultaneously wait for the log file list and the job state result
@@ -631,7 +680,8 @@ export default {
     mdiFolderRefresh,
     mdiPowerPlug,
     mdiPowerPlugOff,
-    mdiFileAlertOutline
+    mdiFileAlertOutline,
+    mdiInformationOutline,
   }
 }
 </script>
diff --git a/tests/e2e/specs/log.cy.js b/tests/e2e/specs/log.cy.js
index 9205f893a..95064e73a 100644
--- a/tests/e2e/specs/log.cy.js
+++ b/tests/e2e/specs/log.cy.js
@@ -184,6 +184,31 @@ describe('Log View', () => {
       .then((clip) => clip.readText())
       .should('equal', `${logDirPath}/${workflowLogFiles[0]}`)
   })
+
+  it('has a job info menu', () => {
+    cy.get('.c-log [data-cy=job-info-btn]')
+      .should('not.exist')
+    cy.get('[data-cy=job-toggle]').click()
+      .get('[data-cy=job-id-input] input')
+      .type('20000102T0000Z/')
+    cy.get('.c-log [data-cy=job-info-btn]')
+      .should('be.visible')
+      // The button should be disabled until a task ID is entered:
+      .should('be.disabled')
+    cy.get('[data-cy=job-id-input] input')
+      .type('succeeded')
+    cy.get('.c-log [data-cy=job-info-btn]')
+      .should('not.be.disabled')
+      .click()
+      .get('[data-cy=job-details]')
+      // It includes job submit number:
+      .contains('20000102T0000Z/succeeded/1')
+      .get('[data-cy=job-details] td')
+      // It includes platform:
+      .contains('Platform')
+      .parent().find('td:last')
+      .contains('localhost')
+  })
 })
 
 describe('Log command in menu', () => {
@@ -209,10 +234,10 @@ describe('Log command in menu', () => {
         .click()
     }
 
-    const jobStateQueries = []
+    const jobDataQueries = []
     cy.intercept('/graphql', ({ body }) => {
-      if (body.operationName === 'JobState') {
-        jobStateQueries.push(body.variables.id)
+      if (body.operationName === 'Jobs') {
+        jobDataQueries.push(body.variables.id)
       }
     })
 
@@ -226,7 +251,7 @@ describe('Log command in menu', () => {
       .contains('job.out')
       // Should not have run queries for this
       .then(() => {
-        expect(jobStateQueries.length).to.eq(0)
+        expect(jobDataQueries.length).to.eq(0)
       })
     // But should run the job state query if we manually enter a job ID:
     const failedID = '20000102T0000Z/failed/01'
@@ -236,7 +261,7 @@ describe('Log command in menu', () => {
       .get('.c-log [data-cy=file-input]')
       .contains('job.err')
       .then(() => {
-        expect(jobStateQueries).to.deep.eq([failedID])
+        expect(jobDataQueries).to.deep.eq([failedID])
       })
   })
 })
diff --git a/tests/e2e/specs/tree.cy.js b/tests/e2e/specs/tree.cy.js
index 71838d275..91b83d432 100644
--- a/tests/e2e/specs/tree.cy.js
+++ b/tests/e2e/specs/tree.cy.js
@@ -69,19 +69,20 @@ describe('Tree view', () => {
       .prev()
       .click()
     cy.get('.leaf:visible:first')
-    const patterns = [
-      /Platform\s*\w+/,
-      /Job ID\s*\d+/,
-      /Job runner\s*\w+/,
-      /Submitted\s*\d{4}-\d{2}-\d{2}T.+/,
-      /Started\s*\d{4}-\d{2}-\d{2}T.+/,
-      /Finished\s*\d{4}-\d{2}-\d{2}T.+/,
-      /Mean run time\s*\d{2}:\d{2}:\d{2}/,
-      /Platform\s*\w+/,
-      /foo\s*foo message/
-    ]
-    for (const pattern of patterns) {
-      cy.get('.leaf:visible:first .leaf-entry')
+    const patterns = new Map([
+      ['Platform', /\w+/],
+      ['Job ID', /\d+/],
+      ['Job runner', /\w+/],
+      ['Submitted time', /\d{4}-\d{2}-\d{2}T.+/],
+      ['Started time', /\d{4}-\d{2}-\d{2}T.+/],
+      ['Finished time', /\d{4}-\d{2}-\d{2}T.+/],
+      ['Mean run time', /\d{2}:\d{2}:\d{2}/],
+      ['foo', 'foo message'],
+    ])
+    for (const [key, pattern] of patterns.entries()) {
+      cy.get('.leaf:visible:first td')
+        .contains(key)
+        .parent().find('td:last')
         .contains(pattern)
     }
     // The leaf node has a triangle pointing to the job icon - check the margin
@@ -159,7 +160,7 @@ describe('Tree view', () => {
 
     // all 7 outputs/messages should be listed in the job-details
     cy.get('@job')
-      .find('.job-details .output')
+      .find('.job-details .outputs tbody tr')
       .should('have.length', 7)
   })
 
diff --git a/tests/unit/utils/tasks.spec.js b/tests/unit/utils/tasks.spec.js
index 700c65095..0a3e3a5cc 100644
--- a/tests/unit/utils/tasks.spec.js
+++ b/tests/unit/utils/tasks.spec.js
@@ -187,6 +187,8 @@ describe('tasks', () => {
       const jobNode = {
         node: {
           messages: [
+            'submitted',
+            'started',
             'chilbolton',
             'larkhill',
           ],
@@ -208,8 +210,8 @@ describe('tasks', () => {
         },
         {
           level: undefined,
-          label: 'larkhill',
-          message: 'Task message: larkhill',
+          label: undefined,
+          message: 'larkhill',
           isMessage: true,
         },
       ])
diff --git a/tests/unit/views/log.vue.spec.js b/tests/unit/views/log.vue.spec.js
index c61edb57f..1e5494396 100644
--- a/tests/unit/views/log.vue.spec.js
+++ b/tests/unit/views/log.vue.spec.js
@@ -24,6 +24,7 @@ import sinon from 'sinon'
 import Log from '@/views/Log.vue'
 import WorkflowService from '@/services/workflow.service'
 import User from '@/model/User.model'
+import { getJobLogFileFromState } from '@/model/JobState.model'
 
 describe('Log view', () => {
   const owner = 'svimes'
@@ -87,7 +88,9 @@ describe('Log view', () => {
         const wrapper = mountFunction()
         wrapper.vm.jobLog = 1
         wrapper.vm.relativeID = '1/foo'
-        expect(await wrapper.vm.getDefaultJobLog()).toBe(expected)
+        const result = await wrapper.vm.fetchJobData()
+        expect(result.state).toBe(state)
+        expect(getJobLogFileFromState(result.state)).toBe(expected)
       })
     })