From 5e042fdfd1dfaf8b29d7ee21a006b71ca58342ff Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Sat, 10 Jul 2021 13:18:22 +0200
Subject: [PATCH] [nouns] fix declension messing up layout

---
 components/Declension.vue | 22 +++++++++++++++++++---
 components/Dictionary.vue |  4 ++--
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/components/Declension.vue b/components/Declension.vue
index 1241e7851..065af2715 100644
--- a/components/Declension.vue
+++ b/components/Declension.vue
@@ -1,11 +1,12 @@
 <template>
-    <span>
+    <span class="position-relative">
         <template v-if="declensionTemplate">
-            <a v-if="!open" href="#" @click.prevent="visible = !visible">{{ word }}</a>
-            <ul v-if="visible" :class="['list-unstyled', 'small', open ? '' : 'm-2 p-2 border']">
+            <a v-if="!open" href="#" @click.prevent="visible = !visible" :class="tooltip && visible ? 'fw-bold' : ''">{{ word }}</a>
+            <ul v-if="visible" :class="['list-unstyled', 'small', open ? '' : 'm-2 p-3 pe-5 border bg-light', tooltip ? 'tooltip' : '']">
                 <li v-for="(declined, c) in declensionTemplate.decline(word, plural)" class="text-nowrap">
                     <strong>{{c}} <small v-if="!condense">({{cases[c]}})</small></strong> {{ declined.join(' / ') }}
                 </li>
+                <li v-if="tooltip" class="close"><a href="#" @click.prevent="visible = false"><Icon v="times"/></a></li>
             </ul>
         </template>
         <template v-else>{{ word }}</template>
@@ -24,6 +25,7 @@
             template: { },
             open: { type: Boolean },
             condense: { type: Boolean },
+            tooltip: { type: Boolean },
         },
         data() {
             return {
@@ -68,3 +70,17 @@
         },
     };
 </script>
+
+<style lang="scss" scoped>
+    ul.tooltip {
+        position: absolute;
+        top: 1rem;
+        left: 0;
+        z-index: 999;
+        li.close {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+        }
+    }
+</style>
diff --git a/components/Dictionary.vue b/components/Dictionary.vue
index 98e0d6174..895169376 100644
--- a/components/Dictionary.vue
+++ b/components/Dictionary.vue
@@ -100,14 +100,14 @@
                 <td>
                     <ul class="list-singular">
                         <li v-for="w in s.el.neutr">
-                            <Declension v-if="config.nouns.declension" :word="w"/>
+                            <Declension v-if="config.nouns.declension" :word="w" tooltip/>
                             <template v-else><Spelling :text="w"/></template>
                             <a :href="`/api/nouns/${w}.png`" target="_blank" rel="noopener"><Icon v="image"/></a>
                         </li>
                     </ul>
                     <ul v-if="config.nouns.plurals" class="list-plural">
                         <li v-for="w in s.el.neutrPl">
-                            <Declension v-if="config.nouns.declension" :word="w" plural :singularOptions="s.el.neutr"/>
+                            <Declension v-if="config.nouns.declension" :word="w" plural :singularOptions="s.el.neutr" tooltip/>
                             <template v-else><Spelling :text="w"/></template>
                             <a :href="`/api/nouns/${w}.png`" target="_blank" rel="noopener"><Icon v="image"/></a>
                         </li>