use CSS for min/max height and auto-size upon opening

tc39 · Aug 29, 2023 · 2466456 · 2466456
1 parent 33837ad
commit 2466456
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/css/elements.css b/css/elements.css
@@ -1163,7 +1163,6 @@ li.menu-search-result-term:before {
   bottom: 0;
   left: 0;
   right: 0;
-  height: 250px;
   display: none;
   background-color: #ddd;
   z-index: 1;
@@ -1172,6 +1171,8 @@ li.menu-search-result-term:before {
 #references-pane-table-container {
   overflow-x: hidden;
   overflow-y: auto;
+  min-height: 35px;
+  max-height: 85vh;
 }
 
 #references-pane {

diff --git a/js/menu.js b/js/menu.js
@@ -735,16 +735,16 @@ let referencePane = {
     this.$header.appendChild(this.$closeButton);
 
     this.$pane.appendChild(this.$header);
-    let tableContainer = document.createElement('div');
-    tableContainer.setAttribute('id', 'references-pane-table-container');
+    this.$tableContainer = document.createElement('div');
+    this.$tableContainer.setAttribute('id', 'references-pane-table-container');
 
     this.$table = document.createElement('table');
     this.$table.setAttribute('id', 'references-pane-table');
 
     this.$tableBody = this.$table.createTBody();
 
-    tableContainer.appendChild(this.$table);
-    this.$pane.appendChild(tableContainer);
+    this.$tableContainer.appendChild(this.$table);
+    this.$pane.appendChild(this.$tableContainer);
 
     menu.$specContainer.appendChild(this.$container);
   },
@@ -797,6 +797,7 @@ let referencePane = {
     this.$table.removeChild(this.$tableBody);
     this.$tableBody = newBody;
     this.$table.appendChild(this.$tableBody);
+    this.autoSize();
   },
 
   showSDOs(sdos, alternativeId) {
@@ -843,19 +844,24 @@ let referencePane = {
     this.$table.removeChild(this.$tableBody);
     this.$tableBody = newBody;
     this.$table.appendChild(this.$tableBody);
+    this.autoSize();
+  },
+
+  autoSize() {
+    this.$tableContainer.style.height =
+      Math.min(250, this.$table.getBoundingClientRect().height) + 'px';
   },
 
   dragStart(pointerDownEvent) {
     let startingMousePos = pointerDownEvent.clientY;
-    let startingHeight = parseInt(getComputedStyle(this.$container).height);
+    let startingHeight = parseInt(this.$tableContainer.getBoundingClientRect().height);
     let moveListener = pointerMoveEvent => {
       if (pointerMoveEvent.buttons === 0) {
         removeListeners();
         return;
       }
       let desiredHeight = startingHeight - (pointerMoveEvent.clientY - startingMousePos);
-      this.$container.style.height =
-        Math.max(50, Math.min(visualViewport.height - 150, desiredHeight)) + 'px';
+      this.$tableContainer.style.height = Math.max(0, desiredHeight) + 'px';
     };
     let listenerOptions = { capture: true, passive: true };
     let removeListeners = () => {