From 7ac2a55315a98cb4ba39553751ed04aa26760154 Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Wed, 26 Jan 2022 08:49:57 +0100
Subject: [PATCH] :bug: Fix header z-index in viewer mode fullscreen

---
 frontend/resources/styles/main/layouts/handoff.scss | 12 ++++++++++--
 frontend/resources/styles/main/layouts/viewer.scss  |  2 +-
 frontend/resources/styles/main/partials/viewer.scss |  4 +++-
 frontend/src/app/main/ui/viewer.cljs                |  3 ++-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/resources/styles/main/layouts/handoff.scss b/frontend/resources/styles/main/layouts/handoff.scss
index 4e06e85d0..5dfa7fefd 100644
--- a/frontend/resources/styles/main/layouts/handoff.scss
+++ b/frontend/resources/styles/main/layouts/handoff.scss
@@ -18,13 +18,14 @@ $width-settings-bar: 16rem;
   }
 }
 
-.fullscreen .handoff-layout:not(.force-visible) {
+.fullscreen.handoff-layout:not(.force-visible) {
   .viewer-header {
     width: 100%;
     position: fixed;
     top: -48px;
     left: 0;
     transition: top 400ms ease 300ms;
+    z-index: 25;
 
     &::after {
       content: " ";
@@ -49,7 +50,14 @@ $width-settings-bar: 16rem;
 .handoff-layout {
   .viewer-section {
     flex-wrap: nowrap;
+    &.fullscreen{
+      .settings-bar,
+      .settings-bar {
+        padding-top:48px;
+      }
+    }
   }
+  
   .settings-bar {
     transition: width 0.2s;
     &.expanded {
@@ -78,7 +86,7 @@ $width-settings-bar: 16rem;
   .handoff-svg-container {
     display: grid;
     width: 100%;
-    height: calc(100% - 35px);
+    height: 100%;
     overflow: auto;
     align-items: center;
     justify-content: safe center;
diff --git a/frontend/resources/styles/main/layouts/viewer.scss b/frontend/resources/styles/main/layouts/viewer.scss
index f1ad747b6..28a817ad7 100644
--- a/frontend/resources/styles/main/layouts/viewer.scss
+++ b/frontend/resources/styles/main/layouts/viewer.scss
@@ -22,7 +22,7 @@
     top: -48px;
     left: 0;
     transition: top 400ms ease 300ms;
-
+    z-index: 1;
     &::after {
       content: " ";
       position: absolute;
diff --git a/frontend/resources/styles/main/partials/viewer.scss b/frontend/resources/styles/main/partials/viewer.scss
index c9ef5bab5..30cb96e7f 100644
--- a/frontend/resources/styles/main/partials/viewer.scss
+++ b/frontend/resources/styles/main/partials/viewer.scss
@@ -8,7 +8,9 @@
 
 .viewer-section {
   height: calc(100vh - 48px);
-
+  &.fullscreen{
+    height: 100vh;
+  }
   grid-row: 1 / span 2;
   grid-column: 1 / span 1;
 
diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs
index 068162b05..432f4ec05 100644
--- a/frontend/src/app/main/ui/viewer.cljs
+++ b/frontend/src/app/main/ui/viewer.cljs
@@ -234,7 +234,8 @@
                             :show? (:show-thumbnails local false)
                             :page page
                             :index index}]
-      [:section.viewer-section {:id "viewer-section"}
+      [:section.viewer-section {:id "viewer-section"
+                                :class (if fullscreen? "fullscreen" "")}
        (cond
          (empty? frames)
          [:section.empty-state