Titles and hgno (meta#495 and #472)

src/components/Header.vue

 <!-- eslint-disable -->
 <template>
   <div class = "header">
-    
-    <router-link tabindex="0" :id="title_id"  :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)" class="article_header"><h2>{{header_text}}</h2>
-    <span :aria-label="hgno_arabic" class="hgno" v-if="$store.state.showHGNO">{{hgno}}</span></router-link>
+    <h2>
+    <router-link tabindex="0" :id="title_id"  :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)" v-bind:class="{'long_lemma': long_lemma}" class="article_header">
+    <span v-for="(lemma, index) in lemmas" :key="index">{{lemma.lemma}}<span :aria-label="hgno_arabic" class="hgno" v-if="$store.state.showHGNO && hgno(lemma)">{{" "+hgno(lemma)}}</span><span class="title_comma" v-if="lemmas[1] && index < lemmas.length-1">{{", "}}</span>
+    </span>
+    </router-link></h2>
     <span class="dict-label">{{dict_label}}</span>
     <h2 class="secondary_header" v-if="secondary_header_text.length">{{secondary_header_text}}</h2>
     <span class="header_group_list" v-if="group_list.length">{{group_list}}</span>
@@ -47,9 +49,22 @@ export default {
     article_id: Number,
     title_id: String
   },
+  methods: {
+    hgno: function(lemma) {
+      let hgint = parseInt(lemma.hgno)
+      if (hgint > 0) {
+        return ["I","II","III","IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI"][hgint-1]
+      }
+      return ""
+    }
+  },
   computed: {
-    header_text: function() {
-      return this.lemmas.map(lemma => lemma.lemma).join(', ')
+    long_lemma: function(lemma) {
+      for (const lemma of this.lemmas) {
+        if (lemma.lemma.length > 18) return true
+      }
+      return false
+
     },
     secondary_header_text: function() {
       let a_forms = []
@@ -69,16 +84,6 @@ export default {
         'nn': 'nynorskordboka'
       }[this.dictionary] || ''
     },
-    hgno: function() {
-      let hgnos = []
-      this.lemmas.forEach(lemma => {
-        let hgint = parseInt(lemma.hgno)
-        if (hgint > 0) {
-          hgnos.push(["I","II","III","IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI"][hgint-1])
-          }
-      })
-      return hgnos.join(", ")
-    },
     hgno_arabic: function() {
     let hgnos = []
     this.lemmas.forEach(lemma => {
@@ -186,16 +191,32 @@ div.lemma {
 
 
 .article_header {
-  display: flex;
-  align-items: baseline;
   text-decoration: none;
+  overflow:auto;
+
+  word-wrap: normal;
+  white-space: wrap;
+  overflow: auto;
+}
+
+.long_lemma {
+  font-size: 22px !important;
+
 }
 
 .hgno {
-  padding-left: 3px;
   color: var(--v-text-base) !important;
+  font-family: unset;
+  font-size: 16px;
+  font-weight: normal;
 }
 
+.title_comma {
+  padding-right: 10px;
+}
+
+
+
 .expand_icon {
     justify-content: center;
     position: absolute;