From 5ff5a4f1411c804380076ab286f314e7293f9455 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Thu, 7 Jul 2022 15:34:30 +0200
Subject: [PATCH] JobDetails: Style preview container

* Limit preview container size to 16:9 aspect ratio.
* Use `-small` size of the last-rendered image, tiny is too small.
---
 web/app/src/assets/base.css                | 26 ++++++++++++++++++++++
 web/app/src/components/jobs/JobDetails.vue |  5 ++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 4a2b9d0a..e5ff863b 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -497,4 +497,30 @@ span.state-transition-arrow.lazy {
   max-height: 100%;
   max-width: 100%;
 }
+
+.preview-container {
+  align-items: center;
+  background-color: var(--color-background);
+  border-radius: var(--border-radius);
+  display: flex;
+  height: 0;
+  justify-content: center;
+  overflow: hidden;
+  padding-top: 56.25%;
+  position: relative;
+}
+
+.preview-container div:first-child {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.preview-container img {
+  max-height: 100%;
+  max-width: 100%;
 }
diff --git a/web/app/src/components/jobs/JobDetails.vue b/web/app/src/components/jobs/JobDetails.vue
index 9ced29ce..afee208d 100644
--- a/web/app/src/components/jobs/JobDetails.vue
+++ b/web/app/src/components/jobs/JobDetails.vue
@@ -1,6 +1,9 @@
 <template>
   <template v-if="hasJobData">
-    <last-rendered-image ref="lastRenderedImage" :jobID="jobData.id" thumbnailSuffix="-tiny" />
+    <div class="preview-container">
+      <last-rendered-image ref="lastRenderedImage" :jobID="jobData.id" thumbnailSuffix="-small" />
+    </div>
+
     <TabsWrapper @clicked-job-details-tab="$emit('reshuffled')">
       <TabItem title="Job Settings">
         <dl v-if="hasSettings">