chore(styles): improve project details animation and increase height

Depending on content, the project details block was not completely
below the toolbar before the animation ended. By using vh instead of %,
the issue is fixed. I also increase a little the animation timing.
I also give project details block a full height when expanded. This
allows me to right longer description if needed and I can use the
default font-size. It improves readability.

2 files changed, 9 insertions, 10 deletions

diff --git a/htdocs/src/scss/base/_animations.scss b/htdocs/src/scss/base/_animations.scss
index 9ec8e9e..6da56b2 100644
--- a/htdocs/src/scss/base/_animations.scss
+++ b/htdocs/src/scss/base/_animations.scss
@@ -44,7 +44,7 @@
 
 @keyframes slideInUp {
   0% {
-    margin-bottom: -100%;
+    margin-bottom: -100vh;
   }
 
   100% {
@@ -59,7 +59,7 @@
   }
 
   100% {
-    margin-bottom: -100%;
+    margin-bottom: -100vh;
     visibility: hidden;
   }
 }
@@ -81,9 +81,9 @@
 }
 
 .slide-in--up {
-  animation: slideInUp 0.8s;
+  animation: slideInUp 1s;
 }
 
 .slide-out--bottom {
-  animation: slideOutBottom 0.8s;
+  animation: slideOutBottom 1s;
 }
diff --git a/htdocs/src/scss/layout/_main.scss b/htdocs/src/scss/layout/_main.scss
index 92602f9..5a7ec20 100644
--- a/htdocs/src/scss/layout/_main.scss
+++ b/htdocs/src/scss/layout/_main.scss
@@ -5,6 +5,7 @@
 .main {
   display: flex;
   flex-flow: column nowrap;
+  height: calc(100% - #{fun.get-var(toolbar-height)});
 
   @include mix.media("screen") {
     @include mix.dimensions("lg") {
@@ -35,7 +36,8 @@
 
 .project-preview {
   background: fun.get-var(color-bg);
-  flex: 0 1 calc(100% - #{fun.get-var(toolbar-height)});
+  flex: 0 1 100%;
+  min-height: 0;
   width: 100%;
 
   @include mix.media("screen") {
@@ -54,11 +56,8 @@
 .project-details {
   background: fun.get-var(color-bg-secondary);
   box-shadow: 0 -1px 2px 0 fun.get-var(color-shadow);
-  display: flex;
-  flex-flow: column nowrap;
-  font-size: fun.get-var(font-size-sm);
-  padding: fun.get-var(spacing-md) fun.get-var(spacing-md)
-    calc(#{fun.get-var(toolbar-height)} + #{fun.get-var(spacing-md)});
+  flex: 1 0 100%;
+  padding: fun.get-var(spacing-md);
 
   @include mix.media("screen") {
     @include mix.dimensions("lg") {