Mobile-friendly navbar (2 lines)

Viewer/assets/templates/default/defaultTemplate.html

@@ -7,9 +7,9 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        -webkit-transition: opacity 1.5s ease;
-        -moz-transition: opacity 1.5s ease;
-        transition: opacity 1.5s ease;
+        -webkit-transition: opacity 2s ease;
+        -moz-transition: opacity 2s ease;
+        transition: opacity 2s ease;
     }
 
     viewer {

Viewer/assets/templates/default/defaultViewer.html

@@ -14,9 +14,8 @@
         background-color: rgba(0, 0, 0, 0.3);
         color: white;
         transition: 1s;
-
-        align-items: center;
-        justify-content: center;
+        align-items: flex-start;
+        justify-content: space-around;
         display: flex;
 
         flex-direction: column;
@@ -26,6 +25,7 @@
 
     @media screen and (min-width: 768px) {
         nav-bar {
+            align-items: center;
             flex-direction: row;
             justify-content: space-between;
             height: 80px;

Viewer/assets/templates/default/navbar.html

@@ -1,6 +1,7 @@
 <style>
     div.flex-container {
         display: flex;
+        width: 100%;
     }
 
     div.thumbnail {
@@ -31,7 +32,7 @@
 
     div.button-container {
         align-items: center;
-        display: flex;
+        justify-content: flex-end;
     }
 
     div.button {
@@ -57,7 +58,7 @@
         <span class="model-subtitle"> {{#if subtitle}}{{subtitle}} {{/if}}</span>
     </div>
 </div>
-<div class="button-container">
+<div class="button-container flex-container">
     <!-- holding the buttons -->
     {{#each buttons}}
     <div id="{{id}}" class="button">

Viewer/dist/basicExample.html

@@ -8,8 +8,10 @@
         <title>BabylonJS Viewer - Basic usage</title>
         <style>
             babylon {
-                width: 800px;
-                height: 500px;
+                max-width: 800px;
+                max-height: 500px;
+                width: 100%;
+                height: 100%;
             }
         </style>
     </head>