[mod] accordion

webapp/static/clients/codemirror/grail.css

@@ -1,4 +1,5 @@
 @import url("../codicon@0.0.40/codicon.css");
+
 :root {
   color-scheme: light dark;
 }
@@ -6,12 +7,14 @@
 * {
   box-sizing: border-box;
 }
+
 body {
   background: #e4e4e4;
   padding: 0;
   height: 100vh;
   margin: 0;
 }
+
 .page-wrap {
   background: white;
   height: calc(100vh - 10px);
@@ -23,28 +26,45 @@ body {
   gap: 1px;
 
 
-.navbar * {
-  box-sizing: content-box;  
-}
+  .navbar * {
+    box-sizing: content-box;
+  }
+
+ details {
+  padding:2px;
+  padding-left: 3px;
+ }
+
+  details[open] {
+    flex-grow: 1;
+    overflow:hidden;
+  }
+
+  summary {
+    /* class: bg-info; */
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
+  }
 
   /* Set editor dimensions */
   #editor {
     max-width: 100%;
     overflow: hidden;
-    height:75cqh;
-}
+    height: 75cqh;
+  }
 
-/* Stretch editor to fit inside its containing div */
-.cm-editor {
+  /* Stretch editor to fit inside its containing div */
+  .cm-editor {
     height: 100%;
     width: 100%;
     overflow: auto;
-}
+  }
 
   @media (max-width: 600px) {
     grid-template-columns: 100%;
     grid-template-rows: auto;
-    > * {
+
+    >* {
       grid-column: 1 / -1 !important;
       grid-row: auto !important;
     }
@@ -59,21 +79,21 @@ body {
 .page-sidebar {
   grid-column: 1 / 2;
   grid-row: 2 / 4;
+  display: flex;
+  flex-direction: column;
 }
+
 .page-nav {
   grid-column: 2 / 3;
   background: red;
 
 }
+
 .page-main {
   grid-column: 2 / 3;
 }
+
 .page-footer {
   grid-column: 1 / -1;
   background: #ffecb3;
 }
-
-
-
-
-

webapp/static/clients/codemirror/grail.html

@@ -98,8 +98,8 @@
 
         <aside class="page-sidebar">
 
-            <details id="workspacePanel" open="open" style="padding:5px;">
-                <summary class="bg-info">Workspace <b>0</b></summary>
+            <details id="workspacePanel" open="open" >
+                <summary class='bg-info'>Workspace <b>0</b></summary>
                 <select id="load">
                     <option selected value="">load..</option>
                     <optgroup label="XQuery3">
@@ -130,13 +130,13 @@
                 </ul>
             </details>
 
-            <details id="symPanel" style="padding:5px;">
-                <summary class="bg-info">OutLine <b>0</b></summary>
-                <json-list id="symList" style="display:block; overflow:scroll; height: 10em;"></json-list>
+            <details id="symPanel">
+                <summary >OutLine <b>0</b></summary>
+                <json-list id="symList" ></json-list>
             </details>
 
-            <details id="msgPanel" style="padding:5px;">
-                <summary class="bg-info">Messages <b>0</b></summary>
+            <details id="msgPanel" >
+                <summary >Messages <b>0</b></summary>
                 <div id="msg">(msgs)<i class='codicon codicon-symbol-method'></i></div>
             </details>
         </aside>

webapp/static/clients/codemirror/list.js

@@ -34,6 +34,7 @@ class ListComponent extends HTMLElement {
     /* Render the list items #data */
     render() {
         const list = document.createElement('ul');
+        list.style="max-height:80cqh;overflow: scroll;";
         const shad=this.#shadow;
         this.#data.forEach((item, index) => {
             const listItem = document.createElement('li');