diff --git a/webapp/static/clients/codemirror/grail.css b/webapp/static/clients/codemirror/grail.css
index 30d9840..484f26b 100644
--- a/webapp/static/clients/codemirror/grail.css
+++ b/webapp/static/clients/codemirror/grail.css
@@ -42,8 +42,8 @@ body {
summary {
/* class: bg-info; */
- --bs-bg-opacity: 1;
- background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
+ --bs-bg-opacity: 1;
+ background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity)) !important;
}
/* Set editor dimensions */
diff --git a/webapp/static/clients/codemirror/grail.html b/webapp/static/clients/codemirror/grail.html
index d06e84b..384c687 100644
--- a/webapp/static/clients/codemirror/grail.html
+++ b/webapp/static/clients/codemirror/grail.html
@@ -148,7 +148,7 @@
-
+
diff --git a/webapp/static/clients/codemirror/list.js b/webapp/static/clients/codemirror/list.js
index 6b5f9ef..04939b0 100644
--- a/webapp/static/clients/codemirror/list.js
+++ b/webapp/static/clients/codemirror/list.js
@@ -34,12 +34,12 @@ class ListComponent extends HTMLElement {
/* Render the list items #data */
render() {
const list = document.createElement('ul');
- list.style="max-height:80cqh;overflow: scroll;";
+ list.style="max-height:80cqh;overflow: auto;";
const shad=this.#shadow;
this.#data.forEach((item, index) => {
const listItem = document.createElement('li');
- listItem.innerHTML = `
- ${item.name} - ${item.detail}`;
+ listItem.innerHTML = `
+ ${item.name} - ${item.detail}`;
// Adding a click event listener for user interaction
listItem.addEventListener('click', () => {
console.log('Item clicked:', item, listItem);