Always use flex display for #tabcontent except on small screen

On form view, this put the scrollbar for long form only on the form without the
preview.
On small screen the form is switch back to block so the panel-body with the
flex-direction column push the #tabcontent to expand more than the height of
the viewport.

With the content of the preview being always visible without scrollbar (except
for the screen), we can put the navigation at the bottom as natural place.

sao/src/sao.less

@@ -285,7 +285,8 @@ html[theme="default"] {
 }
 
 #tabcontent {
-    display: block;
+    display: flex;
+    flex: 1;
     width: 100%;
 
     > .tab-pane > .panel {
@@ -358,11 +359,6 @@ html[theme="default"] {
     }
 }
 
-#tabcontent[data-view-type="tree"] {
-    display: flex;
-    flex: 1;
-}
-
 @media screen and (max-width: @screen-sm-max) {
     #tabcontent {
         .sidebar {
@@ -370,6 +366,8 @@ html[theme="default"] {
         }
     }
     #tabcontent[data-view-type="form"] {
+        display: block;
+
         > .tab-pane > .panel > .panel-body {
             flex-direction: column;
         }
@@ -419,6 +417,16 @@ html[theme="default"] {
     display: flex;
     flex-direction: column;
     flex: 1;
+    min-height: 200px;
+
+    .screen-container {
+        overflow: auto;
+    }
+
+    .btn-group {
+        margin-bottom: 10px;
+        margin-top: 10px;
+    }
 }
 
 .chat {
@@ -1166,7 +1174,7 @@ img.icon {
         object {
             object-fit: scale-down;
             object-position: center top;
-            width: 100%;
+            max-width: 100%;
             min-height: 50vh;
             height: 100%;
             @media screen and (max-width: @screen-xs-max) {

sao/src/tab.js

@@ -1363,7 +1363,7 @@
             screen.windows.push(preview);
 
             screen.switch_view().done(function() {
-                el.append(screen.screen_container.el);
+                el.prepend(screen.screen_container.el);
             });
             return el;
         },