Web: fix styling of last-rendered image in job details

Instead of putting the styling in `<style scoped>`, I moved it to the
global `base.css`. This made things work again.

web/app/src/assets/base.css

@@ -474,3 +474,24 @@ span.state-transition-arrow {
 span.state-transition-arrow.lazy {
   color: var(--color-text-muted);
 }
+
+
+
+.job-details-column .last-rendered {
+  width: 200px;
+  height: 112px;
+  float: right;
+}
+
+.global-last-rendered {
+  grid-column-start: col-1;
+  grid-column-end: col-3;
+
+  /* FIXME: the positioning of the image & sizing of the container DIV doesn't
+  work well yet. */
+  height: 100%;
+}
+
+.global-last-rendered .last-rendered {
+  max-height: 100%;
+}

web/app/src/views/JobsView.vue

@@ -2,7 +2,7 @@
   <div class="col col-1">
     <jobs-table ref="jobsTable" :activeJobID="jobID" @tableRowClicked="onTableJobClicked" />
   </div>
-  <div class="col col-2" id="col-job-details">
+  <div class="col col-2 job-details-column" id="col-job-details">
     <job-details ref="jobDetails" :jobData="jobs.activeJob" @reshuffled="_recalcTasksTableHeight" />
     <tasks-table v-if="hasJobData" ref="tasksTable" :jobID="jobID" :taskID="taskID" @tableRowClicked="onTableTaskClicked" />
   </div>
@@ -247,10 +247,4 @@ export default {
 .isFetching {
   opacity: 50%;
 }
-
-.last-rendered {
-  width: 200px;
-  height: 112px;
-  float: right;
-}
 </style>

web/app/src/views/LastRenderedView.vue

@@ -44,19 +44,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-.last-rendered {
-  max-height: 100%;
-}
-
-.global-last-rendered {
-  grid-column-start: col-1;
-  grid-column-end: col-3;
-
-  /* FIXME: the positioning of the image & sizing of the container DIV doesn't
-  work well yet. */
-  height: 100%;
-}
-
-</style>