Fix rendering issues

Co-Authored-By: Florentin Dörre <florentin.dorre@neotechnology.com>

Author: adamnsch

docs/extra/.ipynb_checkpoints/getting-started-checkpoint.ipynb

@@ -1,6 +1,7 @@
 *.egg-info
 __pycache__
 build
+dist
 
 # Should we ignore the following?
 src/neo4j_viz/resources/nvl_entrypoint/*

docs/extra/getting-started.ipynb

@@ -68,7 +68,7 @@ def render(
 
         if show_hover_tooltip:
             hover_element = f"document.getElementById('{container_id}-tooltip')"
-            hover_div = f'<div id="{container_id}-tooltip" class="tooltip" style="display: none;"/>'
+            hover_div = f'<div id="{container_id}-tooltip" class="tooltip" style="display: none;"></div>'
         else:
             hover_element = "null"
             hover_div = ""
@@ -94,18 +94,18 @@ def render(
         <style>
             {self.styles}
         </style>
-        <div style="position: absolute; z-index: 2147483647; right: 0; top: 0; padding: 1rem">
-            <button type="button" title="Save as PNG" onclick="{nvl_varname}.nvl.saveToFile({{ filename: '{download_name}' }})" class="icon">
-                {self.screenshot_svg}
-            </button>
-            <button type="button" title="Zoom in" onclick="{nvl_varname}.nvl.setZoom({nvl_varname}.nvl.getScale() + 0.5)" class="icon">
-                {self.zoom_in_svg}
-            </button>
-            <button type="button" title="Zoom out" onclick="{nvl_varname}.nvl.setZoom({nvl_varname}.nvl.getScale() - 0.5)" class="icon">
-                {self.zoom_out_svg}
-            </button>
-        </div>
         <div id="{container_id}" style="width: {width}; height: {height}; position: relative;">
+            <div style="position: absolute; z-index: 2147483647; right: 0; top: 0; padding: 1rem">
+                <button type="button" title="Save as PNG" onclick="{nvl_varname}.nvl.saveToFile({{ filename: '{download_name}' }})" class="icon">
+                    {self.screenshot_svg}
+                </button>
+                <button type="button" title="Zoom in" onclick="{nvl_varname}.nvl.setZoom({nvl_varname}.nvl.getScale() + 0.5)" class="icon">
+                    {self.zoom_in_svg}
+                </button>
+                <button type="button" title="Zoom out" onclick="{nvl_varname}.nvl.setZoom({nvl_varname}.nvl.getScale() - 0.5)" class="icon">
+                    {self.zoom_out_svg}
+                </button>
+            </div>
             {hover_div}
         </div>
 

examples/gds-example.ipynb

@@ -16,7 +16,7 @@
 button.icon {
   stroke: var(--stroke);
   background-color: inherit;
-  padding: .4rem .41rem .19rem 0.41rem;
+  padding: 10px 10px 5px 10px;
   border: 1.3px solid #bcbcbc;
   border-radius: 10px;
 }
@@ -38,7 +38,7 @@ button.icon:active {
   z-index: 2147483647;
   right: 0;
   bottom: 0;
-  background:inherit;
+  background-color:var(--button-hover-bg-color);
   border: solid;
   border-color: #BBBEC3;
   border-width: 0.5px;
@@ -47,7 +47,7 @@ button.icon:active {
   margin-bottom: 1rem;
   margin-right: 0.5rem;
   filter: drop-shadow(0 4px 8px rgba(26,27,29,0.12));
-  font-family: PublicSans;
+  font-family: 'Public Sans', sans-serif;
   color: var(--neutral-text-default);
   font-size: 14px
 }