re meta#300 bøyningsboksene mer som i prototype, scroller finere, ikke fokus på bøyningsknapp

src/components/Header.vue

@@ -4,15 +4,17 @@
     <h2 class="article_header">{{header_text}}</h2>
       {{group_list}}
       <details :title="inflect_tooltip" @toggle="toggle()" v-if="group_list" :class="$vuetify.breakpoint.name">
-        <summary :class="dictionary">bøying</summary>
-        <div class="inflection">
-          <div v-for="(lemma, index) in inflection_groups_by_lemma" :key="index">
-            <h4>{{lemma.lemma}}</h4>
-            <component  v-for="grp in Object.keys(lemma.inflection_groups)"
-                        :key="grp.replace('/', '_')"
-                        :is="grp.replace('/', '_')"
-                        :dictionary="dictionary"
-                        :standardisations="lemma.inflection_groups[grp]"></component>
+        <summary :class="dictionary" onclick="this.blur()">bøying</summary>
+        <div class="inflection-wrapper">
+          <div class="inflection">
+            <div v-for="(lemma, index) in inflection_groups_by_lemma" :key="index">
+              <h4>{{lemma.lemma}}</h4>
+              <component  v-for="grp in Object.keys(lemma.inflection_groups)"
+                          :key="grp.replace('/', '_')"
+                          :is="grp.replace('/', '_')"
+                          :dictionary="dictionary"
+                          :standardisations="lemma.inflection_groups[grp]"></component>
+            </div>
           </div>
         </div>
       </details>
@@ -135,6 +137,7 @@ article h2 {
 
 details {
   margin-top: 10px;
+  position: relative;
 }
 
 details > summary {
@@ -198,13 +201,16 @@ details[open] summary ~ * {
   animation: open 0.3s ease-in-out;
 }
 
-.inflection {
-  color: var(--v-primary-base);
-  background-color: #ffffff;
-  margin-top: 5px;
+.inflection-wrapper {
+  padding:20px;
   overflow: scroll;
+  position: absolute;
+  z-index: 10;
+  background-color: rgba(255, 255, 255, 0);
+  max-width: 100vw;
 }
 
+
 .inflection table {
   border-collapse: collapse;
   margin: 10px;
@@ -222,12 +228,21 @@ details > summary::-webkit-details-marker {
   display: none;
 }
 
-details > div {
-  border-radius: 0 0 10px 10px;
-  background-color: #eee;
-  padding: 2px 6px;
-  margin: 0;
-  box-shadow: 3px 3px 4px black;
+.inflection {
+  color: var(--v-primary-base);
+  margin-top: 5px;
+  background-color: #ffffff;
+  width: max-content;
+  border-radius: 30px;
+  padding: 10px;
+  margin-top: 10px;
+  border-style: solid;
+  border-width:  1px;
+  border-color: var(--primary-base)
+}
+
+article:not(.righ_hand_column) .inflection-wrapper {
+  left: -35px;
 }
 
 </style>

src/components/SearchResults.vue

@@ -3,13 +3,20 @@
     <div class="flex-container" :class="$vuetify.breakpoint.name">
       <ul class="hits" v-if="results_bob.length">
         <li  class="article_container" v-for="(result, index) in results_bob" :key="index + results_hash">
-          <Article  :article="result" @article-click="article_link_click"  @details-click="details_click">
+          <Article
+              :article="result"
+              @article-click="article_link_click"
+              @details-click="details_click">
           </Article>
         </li>
       </ul>
       <ul class="hits" v-if="results_nob.length">
         <li class="article_container" v-for="(result, index) in results_nob" :key="index + results_hash">
-          <Article :article="result" @article-click="article_link_click" @details-click="details_click">
+          <Article
+              :article="result"
+              @article-click="article_link_click"
+              @details-click="details_click"
+              :class="right_col_class_name">
           </Article>
         </li>
       </ul>
@@ -27,6 +34,14 @@ export default {
     lang: String
   },
   computed: {
+    right_col_class_name: function() {
+      if (this.$vuetify.breakpoint.mdAndUp) {
+        if (this.results_bob.length) {
+          return 'righ_hand_column'
+        }
+      }
+      return ''
+    },
     results_bob: function(){
       return this.hits.filter(hit => hit.dictionary == 'bob')
     },
@@ -111,4 +126,8 @@ export default {
     top:40px;
     background:linear-gradient(rgba(255, 255, 255, 0) 0px, var(--v-tertiary-base));
   }
+
+  article.righ_hand_column div.inflection-wrapper {
+    right: -35px;
+  }
 </style>