From 71f8791e4acfd8fda8b293f809e18bba6efc57a1 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Fri, 22 Jul 2022 15:41:22 +0200
Subject: [PATCH] Last Rendered: Fix overflow of tall images in global
 last-rendered

Fixes T99458
---
 web/app/src/assets/base.css            | 17 -----------------
 web/app/src/views/LastRenderedView.vue | 17 +++++++++++++++++
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 1ffea14b..2b0f031d 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -578,23 +578,6 @@ span.state-transition-arrow.lazy {
   color: var(--color-text-muted);
 }
 
-.global-last-rendered {
-  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. */
-  height: 100%;
-}
-
-.global-last-rendered .last-rendered {
-  max-height: 100%;
-  max-width: 100%;
-}
-
 .preview-container {
   align-items: center;
   background-color: var(--color-background);
diff --git a/web/app/src/views/LastRenderedView.vue b/web/app/src/views/LastRenderedView.vue
index 6735b9ee..ed5be3e6 100644
--- a/web/app/src/views/LastRenderedView.vue
+++ b/web/app/src/views/LastRenderedView.vue
@@ -44,3 +44,20 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.global-last-rendered {
+  align-items: center;
+  display: flex;
+  grid-column-end: col-3;
+  grid-column-start: col-1;
+  justify-content: center;
+  height: calc(100vh - calc(var(--header-height) - var(--footer-height) - calc(var(--grid-gap) * -12)));
+  max-height: 100%;
+}
+
+.global-last-rendered .last-rendered {
+  max-height: 100%;
+  max-width: 100%;
+}
+</style>