[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
hashicorp · Jan 13, 2023 · 055d32a · 055d32a
1 parent 1b459ed
commit 055d32a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 24 deletions.
diff --git a/.changelog/15759.txt 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
@@ -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
@@ -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
@@ -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),