add DotButton hover text pos

src/components/globals/DotButton.vue

@@ -11,7 +11,7 @@
     @blur="show = false"
     @click="onClick"
   >
-    <span>
+    <span :class="pos">
       <slot name="default" />
     </span>
   </b-button>
@@ -25,7 +25,8 @@ export default {
     variant: { type: String, required: true },
     active: { type: Boolean, default: false },
     hovered: { type: Boolean, default: false },
-    dotOnly: { type: Boolean, default: false }
+    dotOnly: { type: Boolean, default: false },
+    pos: { type: String, default: 'left' }
   },
 
   data () {
@@ -74,10 +75,21 @@ export default {
       pointer-events: none;
       position: absolute;
       display: block;
-      transform: translate(calc(-100% + 1.1875rem), -50%);
       border-radius: 50rem;
       padding: 0 $input-btn-padding-x;
       line-height: 1.5;
+
+      &.left {
+        transform: translate(calc(-100% + 1.1875rem), -50%);
+      }
+
+      &.right {
+        transform: translate(-2px, -50%);
+      }
+
+      &.middle {
+        transform: translate(calc(-50% + #{1.1875rem / 2}), -50%);
+      }
     }
 
     @each $color, $value in $theme-colors {

src/components/nodes/NodeViewChildList.vue

@@ -2,7 +2,7 @@
   <nav class="node-view-child-list" :class="{ 'smartphone': smartphone }">
     <ul>
       <li
-        v-for="child in children" :key="child.id"
+        v-for="(child, i) in children" :key="child.id"
         class="node-view-child-list-item"
       >
         <dot-button
@@ -10,6 +10,7 @@
           :variant="child.variant"
           :active="activeNodes.includes(child.id)"
           dot-only
+          :pos="smartphone ? getDir(i) : 'left'"
         >
           {{ $t('variants.' + child.variant) }}
         </dot-button>
@@ -40,6 +41,13 @@ export default {
   },
 
   methods: {
+    getDir (index) {
+      const len = this.children.length
+      if (index === 0) return 'right'
+      if (index === this.children.length - 1) return 'left'
+      return 'middle'
+    },
+
     onOpen (childId) {
       this.$emit('open-child', { childId })
     }