Add style to zoom controls on family graph

core/static/bundled/user/family-graph-index.ts

@@ -287,6 +287,7 @@ document.addEventListener("alpine:init", () => {
         config.activeUser,
       );
       this.graph.userZoomingEnabled(this.isZoomEnabled);
+      this.$refs.graph.prepend(this.$refs.zoomControl);
       this.loading = false;
     },
   }));

core/static/user/user_godfathers.scss

@@ -2,6 +2,12 @@
   width: 100%;
   height: 70vh;
   display: block;
+  overflow: clip;
+}
+
+.zoom-control {
+  float: right;
+  margin-right: 10px;
 }
 
 .graph-toolbar {
@@ -34,30 +40,37 @@
 
     .depth-choice {
       white-space: nowrap;
+
       input[type="number"] {
         -webkit-appearance: textfield;
         -moz-appearance: textfield;
         appearance: textfield;
+
         &::-webkit-inner-spin-button,
         &::-webkit-outer-spin-button {
           -webkit-appearance: none;
         }
       }
+
       button {
         background: none;
+
         &>.fa {
           border-radius: 50%;
           font-size: 12px;
           padding: 5px;
         }
+
         &:enabled>.fa {
           background-color: #354a5f;
           color: white;
         }
+
         &:enabled:hover>.fa {
           color: white;
           background-color: #35405f; // just a bit darker
         }
+
         &:disabled>.fa {
           background-color: gray;
           color: white;
@@ -74,6 +87,7 @@
   @media screen and (max-width: 500px) {
     flex-direction: column;
     gap: 20px;
+
     .toolbar-column {
       min-width: 100%;
     }
@@ -91,10 +105,12 @@
     margin: 0;
   }
 }
+
 #family-tree-link {
   display: inline-block;
   margin-top: 10px;
   text-align: center;
+
   @media (min-width: 450px) {
     margin-right: auto;
   }

core/templates/core/user_godfathers_tree.jinja

@@ -77,7 +77,6 @@
               ></i></button>
           </span>
         </div>
-
       </div>
 
       <div class="toolbar-column">
@@ -92,8 +91,10 @@
           <i class="fa fa-camera"></i>
           {% trans %}Save{% endtrans %}
         </button>
+      </div>
+    </div>
 
-        <div class="toolbar-input">
+    <div class="zoom-control" x-ref="zoomControl" x-show="graph !== undefined">
       <button
         @click="() => graph.zoom(graph.zoom() + 1)"
       >
@@ -117,8 +118,7 @@
         <i class="fa-solid fa-lock"></i>
       </button>
     </div>
-      </div>
+
-    </div>
     <div x-ref="graph" class="graph"></div>
   </div>