[fix] css

webapp/static/clients/codemirror/grail.css

@@ -69,9 +69,10 @@ details[open]::details-content {
   border: thin solid grey;
   overflow:auto;
 }
-  ::backdrop {
+
+::backdrop {
     backdrop-filter: blur(2px);
-  }
+}
 
   @media (max-width: 600px) {
     grid-template-columns: 100%;
@@ -95,6 +96,11 @@ details[open]::details-content {
   grid-row: 2 / 4;
   display: flex;
   flex-direction: column;
+  details {
+    display: flex;
+    flex-direction: column;
+    
+  }
 }
 
 .page-nav {

webapp/static/clients/codemirror/grail.html

@@ -132,7 +132,7 @@
 
             <details id="symPanel">
                 <summary>OutLine <b>0</b></summary>
-                <qd-list id="symList"></qd-list>
+                <qd-list id="symList" style="flex-grow:1;"></qd-list>
             </details>
 
             <details id="msgPanel">

webapp/static/clients/codemirror/wc-qd-list.js

@@ -117,7 +117,7 @@ class PanelComponent extends HTMLElement {
     /* Render the list items #data */
     render() {
         const list = document.createElement('ul');
-        list.style = "max-height:45cqh;overflow: auto;";
+        list.style = "overflow: auto;";
 
         const select = e => {
             if(e.type ==="keyup" && !(e.key==="Enter" )) return;
@@ -148,7 +148,7 @@ class PanelComponent extends HTMLElement {
         const style = document.createElement('style');
         style.textContent = `
       @import url("../codicon@0.0.40/codicon.css");  
-      ul { list-style-type: none; padding:0;margin:0;overflow: auto; 
+      ul { list-style-type: none; padding:0;margin:0; 
       background-color: #f8f9fa;font-size: 80%;}
       li { padding: 0 0 0 2px; border-bottom: 1px solid #ccc; cursor: pointer; width:100%; }
       li:not(.selected) :hover { background-color:  #ccc; }