From c43ebaf466f5fc1a324952ca44bb8f93c661a351 Mon Sep 17 00:00:00 2001
From: Mitchel van Bever <10127707+mitchelvanbever@users.noreply.github.com>
Date: Sun, 9 Jan 2022 12:14:11 +0100
Subject: [PATCH] fix(ui): flex / percentage based layout (#492)

---
 packages/ui/client/components/FileDetails.vue   | 17 ++++++-----------
 .../ui/client/components/views/ViewEditor.vue   |  1 +
 .../client/components/views/ViewModuleGraph.vue |  5 +++--
 .../ui/client/components/views/ViewReport.vue   |  2 +-
 packages/ui/client/styles/main.css              |  1 -
 5 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
index c78bf2cec885..d9922ffc3765 100644
--- a/packages/ui/client/components/FileDetails.vue
+++ b/packages/ui/client/components/FileDetails.vue
@@ -32,7 +32,7 @@ const changeViewMode = (view: Params['view']) => {
 </script>
 
 <template>
-  <div v-if="current" h-full>
+  <div v-if="current" flex flex-col h-full max-h-full>
     <div>
       <div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
         <StatusIcon :task="current" />
@@ -55,15 +55,10 @@ const changeViewMode = (view: Params['view']) => {
         </button>
       </div>
     </div>
-    <ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" class="file-details-graph" />
-    <ViewEditor v-if="viewMode === 'editor'" :file="current" />
-    <ViewReport v-else-if="!viewMode" :file="current" />
+    <div flex flex-col flex-1 overflow="hidden">
+      <ViewModuleGraph v-if="viewMode === 'graph'" :graph="graph" class="file-details-graph" />
+      <ViewEditor v-if="viewMode === 'editor'" :file="current" />
+      <ViewReport v-else-if="!viewMode" :file="current" />
+    </div>
   </div>
 </template>
-
-<style scoped>
-.file-details-graph {
-  /* The graph container is offset in its parent. Thus we can't use the default 100% height and have to subtract the offset. */
-  --graph-height: calc(100% - 78px - 39px);
-}
-</style>
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index 1f45faaa4ff9..90a74c934db1 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -61,6 +61,7 @@ watch([cm, failed], () => {
   <CodeMirror
     ref="editor"
     v-model="code"
+    min-h-75
     v-bind="{ lineNumbers: true }"
     :mode="ext"
     @save="onSave"
diff --git a/packages/ui/client/components/views/ViewModuleGraph.vue b/packages/ui/client/components/views/ViewModuleGraph.vue
index de96a6433d98..c2944f87fd5e 100644
--- a/packages/ui/client/components/views/ViewModuleGraph.vue
+++ b/packages/ui/client/components/views/ViewModuleGraph.vue
@@ -115,7 +115,7 @@ function bindOnClick(selection: Selection<SVGCircleElement, ModuleNode, SVGGElem
 </script>
 
 <template>
-  <div h-full overflow="hidden">
+  <div h-full min-h-75 flex-1 overflow="hidden">
     <div>
       <div flex items-center gap-4 px-3 py-2>
         <div v-for="node of controller?.nodeTypes.sort()" :key="node" flex="~ gap-1" items-center select-none>
@@ -178,7 +178,8 @@ html.dark {
 }
 
 .graph {
-  height: var(--graph-height, 100%) !important;
+    /* The graph container is offset in its parent. Thus we can't use the default 100% height and have to subtract the offset. */
+  height: calc(100% - 39px) !important;
 }
 
 .graph .node {
diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
index 737907c7e53d..c7704e371cc4 100644
--- a/packages/ui/client/components/views/ViewReport.vue
+++ b/packages/ui/client/components/views/ViewReport.vue
@@ -16,7 +16,7 @@ function relative(p: string) {
 </script>
 
 <template>
-  <div class="scrolls">
+  <div class="scrolls" h-full min-h-75 flex-1>
     <template v-if="failed.length">
       <div v-for="task of failed" :key="task.id">
         <div bg="red-500/10" text="red-500 sm" p="x3 y2" m-2 rounded>
diff --git a/packages/ui/client/styles/main.css b/packages/ui/client/styles/main.css
index 5a7801350d0d..ddf2df2a7478 100644
--- a/packages/ui/client/styles/main.css
+++ b/packages/ui/client/styles/main.css
@@ -132,7 +132,6 @@ html.dark {
 .CodeMirror-scroll,
 .scrolls {
   overflow: auto !important;
-  height: calc(100vh - 78px) !important;
   scrollbar-width: thin;
   scrollbar-color: var(--cm-ttc-c-thumb) var(--cm-ttc-c-track);
 }