From f84cbe0c00af0fc3d6cf390be6eb3e050dd9fbc4 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Jul 2021 18:01:56 +0200
Subject: [PATCH] fix sibling btn positionning

---
 src/components/nodes/NodeViewFooter.vue | 89 ++++++++++++++-----------
 1 file changed, 51 insertions(+), 38 deletions(-)

diff --git a/src/components/nodes/NodeViewFooter.vue b/src/components/nodes/NodeViewFooter.vue
index a9f915c..eade76c 100644
--- a/src/components/nodes/NodeViewFooter.vue
+++ b/src/components/nodes/NodeViewFooter.vue
@@ -3,46 +3,48 @@
     class="node-view-footer" :class="'node-view-footer-' + mode"
   >
     <div class="node-view-footer-wrapper w-100">
-      <div class="tags mb-n2">
-        <b-badge
-          v-for="tag in node.tags" :key="tag.id"
-          variant="dark" pill class="mr-2 mb-2"
-        >
-          {{ tag.name }}
-        </b-badge>
-      </div>
+      <div class="node-view-footer-base">
+        <div class="tags mb-n2">
+          <b-badge
+            v-for="tag in node.tags" :key="tag.id"
+            variant="dark" pill class="mr-2 mb-2"
+          >
+            {{ tag.name }}
+          </b-badge>
+        </div>
 
-      <div v-if="mode === 'view' && node.siblings && node.siblings.length">
-        <b-button :id="'siblings-' + node.id" variant="depart" class="mb-2">
-          {{ $t('siblings') }}
-        </b-button>
+        <div v-if="mode === 'view' && node.siblings && node.siblings.length">
+          <b-button :id="'siblings-' + node.id" variant="depart" class="siblings">
+            {{ $t('siblings') }}
+          </b-button>
 
-        <b-popover
-          :target="'siblings-' + node.id"
-          triggers="focus" placement="top" boundary="viewport"
-          custom-class="popover-siblings"
-        >
-          <ul>
-            <li v-for="sibling in node.siblings" :key="sibling.id">
-              <node-view-title
-                :node="sibling"
-                link edition block
-                @open-node="onOpenSibling(sibling.id, 'siblings-' + node.id)"
-              />
-              <node-view-body
-                v-bind="{ content: sibling.content, nodeId: sibling.id, type: sibling.type || 'ref', mode: 'card' }"
-              />
-              <div class="tags mb-n2 mt-2" v-if="sibling.tags">
-                <b-badge
-                  v-for="tag in sibling.tags" :key="tag.id"
-                  variant="dark" pill class="mr-2 mb-2"
-                >
-                  {{ tag.name }}
-                </b-badge>
-              </div>
-            </li>
-          </ul>
-        </b-popover>
+          <b-popover
+            :target="'siblings-' + node.id"
+            triggers="focus" placement="top" boundary="viewport"
+            custom-class="popover-siblings"
+          >
+            <ul>
+              <li v-for="sibling in node.siblings" :key="sibling.id">
+                <node-view-title
+                  :node="sibling"
+                  link edition block
+                  @open-node="onOpenSibling(sibling.id, 'siblings-' + node.id)"
+                />
+                <node-view-body
+                  v-bind="{ content: sibling.content, nodeId: sibling.id, type: sibling.type || 'ref', mode: 'card' }"
+                />
+                <div class="tags mb-n2 mt-2" v-if="sibling.tags">
+                  <b-badge
+                    v-for="tag in sibling.tags" :key="tag.id"
+                    variant="dark" pill class="mr-2 mb-2"
+                  >
+                    {{ tag.name }}
+                  </b-badge>
+                </div>
+              </li>
+            </ul>
+          </b-popover>
+        </div>
       </div>
 
       <div v-if="mode === 'card' && preview" class="mt-2">
@@ -115,6 +117,17 @@ export default {
     font-size: 1rem;
   }
 
+  &-base {
+    display: flex;
+    align-items: flex-start;
+
+    .siblings {
+      display: block;
+      white-space: nowrap;
+      margin-left: 1rem;
+    }
+  }
+
   .btn-read {
     pointer-events: auto;
   }