Improve scrollbar handling in HTML hierarchy vis

penpot · Jul 10, 2024 · a9ff795 · a9ff795
1 parent 28fc984
commit a9ff795
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/notebooks/hierarchy_inference.ipynb b/notebooks/hierarchy_inference.ipynb
diff --git a/resources/jinja_templates/hierarchy.html b/resources/jinja_templates/hierarchy.html
@@ -20,6 +20,7 @@
             height: 100%;
             overflow-x: scroll;
             overflow-y: scroll;
+            box-sizing: border-box;
         }
 
         #svg {
@@ -52,15 +53,13 @@
 
             const resizeElements = function() {
                 console.log("resize");
+                const scrollbarWidth = 17;
                 const hierarchyWidth = 380;
                 var windowWidth = $(window).width();
                 $hierarchy.width(hierarchyWidth);
-                $svg.width(windowWidth-hierarchyWidth);
+                $svg.width(windowWidth-hierarchyWidth-scrollbarWidth);
             };
 
-            resizeElements();
-            $(window).on('resize', resizeElements);
-
             // create hierarchy tree
             // data: list of objects
             var treeData = {{ hierarchyData|safe }};
@@ -82,6 +81,9 @@
                     $("#" + node.data["id"]).addClass("visible");
                 });
             });
+
+            resizeElements();
+            $(window).on('resize', resizeElements);
         });
     </script>