From beb8684a385e72aec9505ee99e22f436ddba06d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Fri, 1 Jul 2022 13:10:21 +0200
Subject: [PATCH] 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            | 21 +++++++++++++++++++++
 web/app/src/views/JobsView.vue         |  8 +-------
 web/app/src/views/LastRenderedView.vue | 16 ----------------
 3 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index beb70ef7..9a09396b 100644
--- a/web/app/src/assets/base.css
+++ b/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%;
+}
diff --git a/web/app/src/views/JobsView.vue b/web/app/src/views/JobsView.vue
index 5a3cb5a6..dcb0221c 100644
--- a/web/app/src/views/JobsView.vue
+++ b/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>
diff --git a/web/app/src/views/LastRenderedView.vue b/web/app/src/views/LastRenderedView.vue
index 0d5211d9..003dcca4 100644
--- a/web/app/src/views/LastRenderedView.vue
+++ b/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>