Use documented option to place popper instead of manually applying ma…

…rgin
galaxyproject · Jan 15, 2025 · 7143ec9 · 7143ec9
1 parent 9a9ff31
commit 7143ec9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -1,18 +1,25 @@
 <template>
     <div class="h-100 w-100">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
-            <div class="border rounded m-2 p-2">
+            <CellButton>
+                <FontAwesomeIcon :icon="faPlusSquare" />
+            </CellButton>
+            <div class="border rounded mx-2 p-2">
                 {{ cell }}
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { faPlusSquare } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
 import { parseMarkdown } from "@/components/Markdown/parse";
 
+import CellButton from "./CellButton.vue";
+
 const props = defineProps<{
     markdownText: string;
 }>();

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
@@ -3,7 +3,7 @@
         <span v-if="!referenceEl" ref="reference">
             <slot name="reference" />
         </span>
-        <div v-show="visible" ref="popper" class="popper-element mt-1" :class="`popper-element-${mode}`">
+        <div v-show="visible" ref="popper" class="popper-element" :class="`popper-element-${mode}`">
             <div v-if="arrow" class="popper-arrow" data-popper-arrow />
             <div v-if="title" class="popper-header px-2 py-1 rounded-top d-flex justify-content-between">
                 <span class="px-1">{{ title }}</span>

diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
@@ -31,6 +31,14 @@ export function usePopper(
         instance.value = createPopper(reference.value, popper.value, {
             placement: options.placement ?? "bottom",
             strategy: "absolute",
+            modifiers: [
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, 5],
+                    },
+                },
+            ],
         });
 
         const trigger = options.trigger ?? defaultTrigger;