Fix tree overflow

Author: d9beuD

public/styles/main.css

@@ -206,6 +206,7 @@ main.tree-view {
 
 #tree-view-panel {
     max-width: 100dvw;
+    max-height: 100%;
     overflow: auto;
 }
 

templates/person/show_tree.html.twig

@@ -16,9 +16,11 @@
             {{ include('tree/_tree_form.html.twig', { tree: person.tree }) }}
         </div>
     </div>
-    <div class="col-md d-flex justify-content-center align-items-center" id="tree-view-panel">
-        <div class="p-3" style="width: fit-content;">
-            {{ include('tree/tree.html.twig', { person: person, depth: 1 }) }}
+    <div class="col-md d-flex justify-content-center align-items-center mh-100" id="tree-view-panel">
+        <div class="text-center" style="width: inherit; height: inherit; max-height: inherit;">
+            <div class="m-3 d-inline-block">
+                {{ include('tree/tree.html.twig', { person: person, depth: 1 }) }}
+            </div>
         </div>
     </div>
 </section>

templates/tree/tree.html.twig

@@ -1,7 +1,7 @@
 {% set link = link|default(false) %}
 {% set max_depth = form.depth.vars.data|default(0) %}
 
-<div class="row g-0 flex-column-reverse aling-items-center justify-content-center flex-grow-1 flex-nowrap">
+<div class="row g-0 flex-column-reverse aling-items-center justify-content-center flex-nowrap" style="width: fit-content;">
     {% if link %}
         <div class="col">
             <div class="tree-link tree-link-{{ direction }} {{ margin }}"></div>