Rework sizing and positioning of details pane popup.

diff --git a/js/src/ToolTip.js b/js/src/ToolTip.js
index e622e2abc04a7fbcd65ba28ae4843bf48e4b434d..1570d96a9f3d671884eae315e02c250e58391e58 100644 (file)
--- a/js/src/ToolTip.js
+++ b/js/src/ToolTip.js
@@ -58,7 +58,7 @@ var ToolTip = (function () {
     // Show the details pane
     my.showDetails = function () {
         var id = bookId;
-        var elem = Browser.getElementById('details');
+        var detailsElem = Browser.getElementById('details');
         var index = BooksModel.map[id];
         var book = BooksModel.cache[index];
         var html = '<div><p><b>' + book.Title + '</b></p>'
@@ -71,23 +71,36 @@ var ToolTip = (function () {
         mousePos.x = g_state.mousePos.x;
         mousePos.y = g_state.mousePos.y;
 
-        elem.innerHTML = html;
+        detailsElem.innerHTML = html;
 
-        elem.style.display = 'block';    // show, and calculate size, so that we can query it below
+        detailsElem.style.display = 'block';    // show, and calculate size, so that we can query it below
         
         var x = mousePos.x;
         var y = mousePos.y;
         
-        var bcr = elem.getBoundingClientRect();
-        
-        var width = bcr.width;
-        var height = bcr.height;
-        
-        x = Math.max(x - (width / 2), 0);
-        y = Math.max(y - (height / 2), 0);
+        var detailsBcr = detailsElem.getBoundingClientRect();
+
+        const viewportArea = window.innerWidth * window.innerHeight;
+        const detailsArea = detailsBcr.width * detailsBcr.height;
+
+        const ratio = detailsArea / viewportArea;
+
+        const adjustedWidth = Math.min(
+          window.innerWidth,
+          Math.max(100, Math.ceil(window.innerWidth * ratio * 2))
+        );
+        detailsElem.style.width = adjustedWidth + 'px';
+
+        detailsBcr = detailsElem.getBoundingClientRect();
+
+        const leftOffset = (detailsBcr.width / 2);
+        const topOffset = (detailsBcr.height / 2);
         
-        elem.style.left = x + 'px';
-        elem.style.top = y + 'px';
+        x = Math.max(0, x - leftOffset);
+        y = Math.max(0, y - topOffset);
+
+        detailsElem.style.left = x + 'px';
+        detailsElem.style.top = y + 'px';
     };
 
     my.startTooltipTimer = function (newBookId) {