From 5501f8621594915d8f7e0f4e2738db08ae468447 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Thu, 7 Jul 2022 15:32:46 +0200
Subject: [PATCH] LastRenderedImage: Center image and limit width

---
 web/app/src/assets/base.css                       | 7 ++++++-
 web/app/src/components/jobs/LastRenderedImage.vue | 8 ++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 7fea8644..4a2b9d0a 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -482,8 +482,11 @@ span.state-transition-arrow.lazy {
 }
 
 .global-last-rendered {
-  grid-column-start: col-1;
+  align-items: center;
+  display: flex;
   grid-column-end: col-3;
+  grid-column-start: col-1;
+  justify-content: center;
 
   /* FIXME: the positioning of the image & sizing of the container DIV doesn't
   work well yet. */
@@ -492,4 +495,6 @@ span.state-transition-arrow.lazy {
 
 .global-last-rendered .last-rendered {
   max-height: 100%;
+  max-width: 100%;
+}
 }
diff --git a/web/app/src/components/jobs/LastRenderedImage.vue b/web/app/src/components/jobs/LastRenderedImage.vue
index b2a8fc0e..4e46126c 100644
--- a/web/app/src/components/jobs/LastRenderedImage.vue
+++ b/web/app/src/components/jobs/LastRenderedImage.vue
@@ -114,13 +114,9 @@ defineExpose({
 </script>
 
 <style scoped>
-.last-rendered {
-  background-color: #2b2b2b;
-  border-radius: var(--border-radius);
-}
 .last-rendered img {
-  width: 100%;
-  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
   object-fit: contain;
 }
 </style>