From d588aabca6919155804d867c517db0ec7c13529f Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil.renaud@hashicorp.com>
Date: Fri, 13 Jan 2023 12:16:02 -0500
Subject: [PATCH] [ui] Fixes logger height issue when sidebar has events
 (#15759)

* Fixes logger height issue when sidebar has events

* Much simpler grid method for height calc
---
 .changelog/15759.txt                       |  3 ++
 ui/app/components/task-context-sidebar.hbs |  3 +-
 ui/app/styles/components/sidebar.scss      | 43 +++++++++++-----------
 ui/mirage/factories/task-state.js          |  3 +-
 4 files changed, 28 insertions(+), 24 deletions(-)
 create mode 100644 .changelog/15759.txt

diff --git a/.changelog/15759.txt b/.changelog/15759.txt
new file mode 100644
index 000000000..2791ec28e
--- /dev/null
+++ b/.changelog/15759.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Scale down logger height in the UI when the sidebar container also has task events
+```
diff --git a/ui/app/components/task-context-sidebar.hbs b/ui/app/components/task-context-sidebar.hbs
index a9a9c2bcd..a8dd65f5e 100644
--- a/ui/app/components/task-context-sidebar.hbs
+++ b/ui/app/components/task-context-sidebar.hbs
@@ -1,6 +1,6 @@
 <Portal @target="log-sidebar-portal">
 	<div
-		class="sidebar task-context-sidebar has-subnav {{if this.wide "wide"}} {{if this.isSideBarOpen "open"}} {{if this.isSideBarOpen "open"}}"
+		class="sidebar task-context-sidebar has-subnav {{if this.wide "wide"}} {{if @task.events.length "has-events"}} {{if this.isSideBarOpen "open"}}"
 		{{on-click-outside
 			@fns.closeSidebar
 			capture=true
@@ -74,7 +74,6 @@
 					</ListTable>
 				</div>
 			</div>
-			<hr />
 		{{/if}}
 
 		<TaskLog
diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss
index 9f189ef6b..2791d4d75 100644
--- a/ui/app/styles/components/sidebar.scss
+++ b/ui/app/styles/components/sidebar.scss
@@ -73,6 +73,13 @@ $subNavOffset: 49px;
 }
 
 .task-context-sidebar {
+  display: grid;
+  gap: 1rem;
+  grid-template-rows: auto 1fr;
+
+  &.has-events {
+    grid-template-rows: auto minmax(auto, 25%) 1fr;
+  }
   header {
     display: grid;
     justify-content: left;
@@ -120,30 +127,24 @@ $subNavOffset: 49px;
     }
   }
 
-  .task-events .boxed-section-body {
-    height: 250px;
-    overflow: auto;
-    table {
-      height: 100%;
-    }
+  & > .task-events,
+  & > .task-log {
+    overflow: hidden;
   }
 
-  // Instead of trying to calculate on the fly with JS, let's use vh and offset nav and headers above.
-  // We can make this a LOT more streamlined when CSS Container Queries are available.
-  $sidebarTopOffset: 161px;
-  $sidebarInnerPadding: 48px;
-  $sidebarHeaderOffset: 74px;
-  $cliHeaderOffset: 54.5px;
-  $offsetWithoutEvents: $sidebarTopOffset + $sidebarInnerPadding +
-    $sidebarHeaderOffset + $cliHeaderOffset;
-  $sidebarEventsHeight: 250px + 44px + 44px; // table + table header + horizontal rule
+  .task-events,
+  .task-log {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    .boxed-section-body {
+      overflow: auto;
+    }
+    .notification {
+      grid-row: -1;
+    }
+  }
 
   .cli-window {
-    height: calc(100vh - $offsetWithoutEvents);
-  }
-  &.has-events {
-    .cli-window {
-      height: calc(100vh - $offsetWithoutEvents - $sidebarEventsHeight);
-    }
+    height: 100%;
   }
 }
diff --git a/ui/mirage/factories/task-state.js b/ui/mirage/factories/task-state.js
index 8afa68d0b..7cbcbf4f2 100644
--- a/ui/mirage/factories/task-state.js
+++ b/ui/mirage/factories/task-state.js
@@ -5,7 +5,8 @@ const TASK_STATUSES = ['pending', 'running', 'finished', 'failed'];
 const REF_TIME = new Date();
 
 export default Factory.extend({
-  name: () => '!!!this should be set by the allocation that owns this task state!!!',
+  name: () =>
+    '!!!this should be set by the allocation that owns this task state!!!',
   state: () => faker.helpers.randomize(TASK_STATUSES),
   kind: null,
   startedAt: () => faker.date.past(2 / 365, REF_TIME),