refactor: add line break for multiple hits

src/.vuepress/components/SearchResultList.vue

@@ -4,25 +4,24 @@
       v-if="items.length > 0"
       >
       <v-list-item v-for="(item, i) in items" :key="item.item" class="pl-0 mb-1 d-flex flex-row">
-          <span class="numbering align-self-start">
-              <span class="text-underline mr-2">{{ hitCounter + i }}.</span>
-          </span>
+        <span class="numbering align-self-start">
+          <span class="text-underline mr-2">{{ hitCounter + i }}.</span>
+        </span>
+
         <v-list-item-content class="d-flex flex-row">
           <a :href="getItemUrl(item)">
             <v-list-item-title class="mb-2">
+              <!-- TODO: add translation -->
               <span class="font-weight-regular">Sheet {{ item.n }}</span><span class="font-weight-light"> in </span><span class="font-weight-regular">{{ item.label }}</span>
             </v-list-item-title>
 
-            <v-list-item-subtitle class="d-flex mb-1">
+            <v-list-item-subtitle class="d-flex mb-1 multiple-hits">
               <span v-for="(matchItem, i) in item.matches" :key="i" class="d-flex mb-1">
+                <!-- TODO: add translation -->
                 <span>{{ matchItem.occurrencesOnPage }} {{ matchItem.occurrencesOnPage === 1 ? 'Hit' : 'Hits' }} for <code>{{ matchItem.match }}</code></span>
-                <span v-if="i < item.matches.length - 1">, </span>
               </span>
-              <!-- #TODO: add translation -->
-              <!--<span class="ml-1">in Sheet {{item.n}}</span>-->
             </v-list-item-subtitle>
-            <!-- #TODO: add translation -->
-            <!--<v-list-item-subtitle>Manifest: {{item.label}}</v-list-item-subtitle>-->
+            <!-- TODO: add translation -->
             <v-list-item-subtitle class="">{{ getLanguage(item.lang) }} Edition</v-list-item-subtitle>
           </a>
         </v-list-item-content>
@@ -94,6 +93,10 @@ a {
   text-decoration: none;
 }
 
+.multiple-hits {
+  flex-direction: column;
+}
+
 .numbering {
   padding-top: 10px;
   width: 48px;