chore: print the project preview & details on click

On small viewport, hide the project details and display it when the
user clicks on toolbar button. So I adjust the toolbar z-index and the
preview height.

4 files changed, 13 insertions, 2 deletions

diff --git a/htdocs/src/scss/base/_helpers.scss b/htdocs/src/scss/base/_helpers.scss
index 2e85a51..d6a9233 100644
--- a/htdocs/src/scss/base/_helpers.scss
+++ b/htdocs/src/scss/base/_helpers.scss
@@ -2,7 +2,7 @@
 @use "../abstracts/mixins" as mix;
 
 .hide {
-  display: none;
+  display: none !important;
 }
 
 /* Text meant only for screen readers. */
diff --git a/htdocs/src/scss/base/_spacings.scss b/htdocs/src/scss/base/_spacings.scss
index 9106c48..f7ff3c0 100644
--- a/htdocs/src/scss/base/_spacings.scss
+++ b/htdocs/src/scss/base/_spacings.scss
@@ -15,3 +15,13 @@
     toolbar-height: fun.convert-px(60),
   )
 );
+
+@include mix.media("screen") {
+  @include mix.dimensions("lg") {
+    @include mix.set-vars(
+      (
+        toolbar-height: fun.convert-px(0),
+      )
+    );
+  }
+}
diff --git a/htdocs/src/scss/layout/_main.scss b/htdocs/src/scss/layout/_main.scss
index 9adb18d..8118d9b 100644
--- a/htdocs/src/scss/layout/_main.scss
+++ b/htdocs/src/scss/layout/_main.scss
@@ -35,7 +35,7 @@
 
 .project-preview {
   background: fun.get-var(color-bg);
-  flex: 1;
+  flex: 0 1 calc(100% - #{fun.get-var(toolbar-height)});
   width: 100%;
 
   @include mix.media("screen") {
diff --git a/htdocs/src/scss/layout/_toolbar.scss b/htdocs/src/scss/layout/_toolbar.scss
index 585b3e6..c96bd1d 100644
--- a/htdocs/src/scss/layout/_toolbar.scss
+++ b/htdocs/src/scss/layout/_toolbar.scss
@@ -13,6 +13,7 @@
   left: 0;
   position: absolute;
   right: 0;
+  z-index: 2;
 
   & > &__options {
     background: fun.get-var(color-primary);