From 8fc2949099d1690485337035d4f6b0ff63106123 Mon Sep 17 00:00:00 2001
From: Edan Bainglass <edan.bainglass@gmail.com>
Date: Mon, 13 Jan 2025 17:59:00 +0000
Subject: [PATCH] Improve styles

---
 .../app/result/components/status/status.py    |  2 +-
 .../app/result/components/status/tree.py      |  1 +
 src/aiidalab_qe/app/static/styles/status.css  | 18 ++++++++++++++
 src/aiidalab_qe/common/node_view.py           |  8 ++++++-
 src/aiidalab_qe/common/widgets.py             | 24 +++++++++++++++----
 5 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/src/aiidalab_qe/app/result/components/status/status.py b/src/aiidalab_qe/app/result/components/status/status.py
index dfa50d9ef..7f38c8b57 100644
--- a/src/aiidalab_qe/app/result/components/status/status.py
+++ b/src/aiidalab_qe/app/result/components/status/status.py
@@ -53,7 +53,7 @@ def _render(self):
         )
         self.reset_button.on_click(self._reset_process_tree)
 
-        self.node_view_container = ipw.VBox()
+        self.node_view_container = ipw.VBox(layout=ipw.Layout(height="100%"))
         self.node_view_container.add_class("node-view-container")
 
         self.to_advanced_view_button = ipw.Button(
diff --git a/src/aiidalab_qe/app/result/components/status/tree.py b/src/aiidalab_qe/app/result/components/status/tree.py
index ce684f5d1..799020cab 100644
--- a/src/aiidalab_qe/app/result/components/status/tree.py
+++ b/src/aiidalab_qe/app/result/components/status/tree.py
@@ -69,6 +69,7 @@ def _render(self):
         self.collapse_button.on_click(self._collapse_all)
         root = self._model.fetch_process_node()
         self.trunk = WorkChainTreeNode(node=root, on_inspect=self._on_inspect)
+        self.trunk.layout.flex = "1"
         self.trunk.initialize()
         self.trunk.expand()
         self.rendered = True
diff --git a/src/aiidalab_qe/app/static/styles/status.css b/src/aiidalab_qe/app/static/styles/status.css
index 0ea443089..e94d78b24 100644
--- a/src/aiidalab_qe/app/static/styles/status.css
+++ b/src/aiidalab_qe/app/static/styles/status.css
@@ -23,6 +23,24 @@
 
 /* Process tree */
 
+.rolling-output {
+  flex: 1;
+  min-height: 300px;
+}
+
+.rolling-output .widget-html .widget-html-content {
+  position: absolute !important;
+  width: 100%;
+}
+
+.rolling-output .widget-html .widget-html-content pre {
+  position: relative !important;
+}
+
+.simplified-process-tree {
+  height: 100%;
+}
+
 .simplified-process-tree .tree-node-header {
   align-items: center;
   padding-left: 12px;
diff --git a/src/aiidalab_qe/common/node_view.py b/src/aiidalab_qe/common/node_view.py
index 3b8d49661..311e51d1d 100644
--- a/src/aiidalab_qe/common/node_view.py
+++ b/src/aiidalab_qe/common/node_view.py
@@ -102,8 +102,14 @@ def __init__(self, calcjob, **kwargs):
         self.output_follower.observe(self._observe_output_follower_lineno, ["lineno"])
 
         super().__init__(
-            [ipw.HTML(f"CalcJob: {self.calcjob}"), self.log_output], **kwargs
+            children=[
+                ipw.HTML(f"CalcJob: {self.calcjob}"),
+                self.log_output,
+            ],
+            layout=ipw.Layout(height="100%"),
+            **kwargs,
         )
+        self.add_class("calcjob-node-viewer")
 
     def _observe_output_follower_lineno(self, _):
         with self.hold_trait_notifications():
diff --git a/src/aiidalab_qe/common/widgets.py b/src/aiidalab_qe/common/widgets.py
index b04941532..4bbe8e613 100644
--- a/src/aiidalab_qe/common/widgets.py
+++ b/src/aiidalab_qe/common/widgets.py
@@ -50,12 +50,15 @@ class RollingOutput(ipw.VBox):
 
     def __init__(self, num_min_lines=10, max_output_height="200px", **kwargs):  # noqa: ARG002
         self._num_min_lines = num_min_lines
-        self._output = ipw.HTML(layout=ipw.Layout(min_width="50em"))
+        self._output = ipw.HTML(layout=ipw.Layout(min_width="80em"))
         self._refresh_output()
         super().__init__(
-            [self._output],
+            children=[
+                self._output,
+            ],
             layout=ipw.Layout(max_height=max_output_height),
         )
+        self.add_class("rolling-output")
 
     @traitlets.default("value")
     def _default_value(self):
@@ -179,7 +182,10 @@ class LogOutputWidget(ipw.VBox):
     def __init__(self, placeholder=None, **kwargs):
         self.placeholder = placeholder
 
-        self._rolling_output = RollingOutput(layout=ipw.Layout(flex="1 1 auto"))
+        self._rolling_output = RollingOutput(
+            layout=ipw.Layout(flex="1 1 auto"),
+            max_output_height="unset",
+        )
         ipw.dlink(
             (self, "value"),
             (self._rolling_output, "value"),
@@ -230,12 +236,20 @@ def __init__(self, placeholder=None, **kwargs):
         )
 
         super().__init__(
-            [
+            children=[
                 self._filename_display,
-                ipw.HBox([self._rolling_output, self._btns]),
+                ipw.HBox(
+                    children=[
+                        self._rolling_output,
+                        self._btns,
+                    ],
+                    layout=ipw.Layout(height="100%"),
+                ),
             ],
+            layout=ipw.Layout(height="100%"),
             **kwargs,
         )
+        self.add_class("log-output")
 
     @traitlets.default("placeholder")
     def _default_placeholder(self):