From 7f7f764c5ab3d1544467949cd79be2bf8e02d93c Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil.renaud@hashicorp.com>
Date: Thu, 27 Apr 2023 09:49:18 -0400
Subject: [PATCH] [ui] Fixed: Evaluations sidebar/response not scrollable
 (#16960)

* Sets up a CSS grid for Evaluations sidebar

* Flex seems more sensible for this actually

* Tighten up the header margin

* Percy found a diff; the expand button wasnt showing for view logs sidebar
---
 .changelog/16960.txt                          |  3 +++
 .../components/evaluation-sidebar/detail.hbs  |  4 ++--
 ui/app/styles/components/sidebar.scss         | 20 +++++++++++++++++++
 3 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 .changelog/16960.txt

diff --git a/.changelog/16960.txt b/.changelog/16960.txt
new file mode 100644
index 000000000..a2e496f1e
--- /dev/null
+++ b/.changelog/16960.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix a visual bug where evaluation response wasn't scrollable in the Web UI.
+```
diff --git a/ui/app/components/evaluation-sidebar/detail.hbs b/ui/app/components/evaluation-sidebar/detail.hbs
index bbc1af074..c788e0696 100644
--- a/ui/app/components/evaluation-sidebar/detail.hbs
+++ b/ui/app/components/evaluation-sidebar/detail.hbs
@@ -11,7 +11,7 @@
     <div
       data-test-eval-detail
       data-test-eval-detail-is-open={{this.isSideBarOpen}}
-      class="sidebar {{if this.isSideBarOpen "open"}}"
+      class="sidebar {{if this.isSideBarOpen "open"}} evaluations-sidebar"
       {{on-click-outside
         this.closeSidebar
         capture=true
@@ -162,7 +162,7 @@
           </div>
         {{/if}}
         {{! Evaluation JSON Response}}
-        <div class="boxed-section">
+        <div class="boxed-section evaluation-response">
           <div class="boxed-section-head">
             Evaluation Response
           </div>
diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss
index b5a292771..b4b18065f 100644
--- a/ui/app/styles/components/sidebar.scss
+++ b/ui/app/styles/components/sidebar.scss
@@ -41,6 +41,26 @@ $subNavOffset: 49px;
     box-shadow: -5px 0 10px -5px rgb(0 0 0 / 20%);
     border-radius: 16px;
   }
+
+  &.evaluations-sidebar {
+    display: flex;
+    gap: 1.5rem;
+    flex-direction: column;
+
+    & > .evaluation-response {
+      display: grid;
+      min-height: 200px;
+      grid-template-rows: auto 1fr;
+      overflow: hidden;
+      & > .boxed-section-body {
+        overflow: auto;
+      }
+    }
+    & > div,
+    h1.title {
+      margin: 0;
+    }
+  }
 }
 
 .sidebar-content {