From b26b3538cf9881dce71b72b6e5ed7e6ab0909a07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Sat, 12 Apr 2025 12:42:54 +0200
Subject: [PATCH] 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 | 22 +++++++++++++++-------
 sao/src/tab.js   |  2 +-
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/sao/src/sao.less b/sao/src/sao.less
index ca74753698..79a24d210b 100644
--- a/sao/src/sao.less
+++ b/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) {
diff --git a/sao/src/tab.js b/sao/src/tab.js
index d68080e0d7..4739d0da70 100644
--- a/sao/src/tab.js
+++ b/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;
         },