diff --git a/.changelog/15759.txt b/.changelog/15759.txt new file mode 100644 index 000000000000..2791ec28e06f --- /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 a9a9c2bcd494..a8dd65f5e5b9 100644 --- a/ui/app/components/task-context-sidebar.hbs +++ b/ui/app/components/task-context-sidebar.hbs @@ -1,6 +1,6 @@ -
{{/if}} .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 8afa68d0bae0..7cbcbf4f2d60 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),