final style touches

css/sq2bs.css

@@ -449,36 +449,6 @@ a:hover {
     border-color: #fff;
 }
 
-/* atree connector rotations */
-.rotate-90 {
-    -webkit-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
-    transform: rotate(90deg);
-}
-
-.rotate-180 {
-    -webkit-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
-    transform: rotate(180deg);
-}
-
-.rotate-270 {
-    -webkit-transform: rotate(270deg);
-    -moz-transform: rotate(270deg);
-    -ms-transform: rotate(270deg);
-    -o-transform: rotate(270deg);
-    transform: rotate(270deg);
-}
-
-.rotate-flip {
-    -webkit-transform: scaleX(-1);
-    transform: scaleX(-1);
-}
-
 
 
 .hide-scroll {
@@ -489,12 +459,6 @@ a:hover {
     display: none;  /* Safari and Chrome */
 }
 
-.atree-circle {
-    border-radius:50%;
-    -moz-border-radius:50%;
-    -webkit-border-radius:50%;
-}
-
 .hppeng{
     color: #20c2b6;
 }

js/atree.js

@@ -665,6 +665,12 @@ class AbilityTreeEnsureNodesNode extends ComputeNode {
  */
 function render_AT(UI_elem, list_elem, tree) {
     console.log("constructing ability tree UI");
+
+    // increase padding, since images are larger than the space provided
+    UI_elem.style.paddingRight = "calc(var(--bs-gutter-x) * 1)";
+    UI_elem.style.paddingLeft = "calc(var(--bs-gutter-x) * 1)";
+    UI_elem.style.paddingTop = "calc(var(--bs-gutter-x) * .5)";
+
     // add in the "Active" title to atree
     let active_row = document.createElement("div");
     active_row.classList.add("row", "item-title", "mx-auto", "justify-content-center");
@@ -799,7 +805,6 @@ function render_AT(UI_elem, list_elem, tree) {
         node_img.src = '../media/atree/'+icon+'.png';
         node_img.style = "width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated; z-index: 1;";
         node_elem.appendChild(node_img);
-        node_elem.classList.add("atree-circle");
 
         // create hitbox
         // this is necessary since images exceed the size of their square, but should only be interactible within that square
@@ -857,7 +862,7 @@ function render_AT(UI_elem, list_elem, tree) {
             let tooltip = this.parentElement.children[this.parentElement.children.length - 1];
             tooltip.style.top = "50px";
             tooltip.style.left = (this.parentElement.parentElement.parentElement.getBoundingClientRect().left - this.getBoundingClientRect().left) + "px";
-            tooltip.style.width = UI_elem.getBoundingClientRect().width * .95 + "px";
+            tooltip.style.width = UI_elem.getBoundingClientRect().width * .9 + "px";
             tooltip.style.display = "block";
         });