🐛 Fix header z-index in viewer mode fullscreen

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;

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;

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;
 

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