style: improve display of result number

src/.vuepress/components/SearchResultList.vue

@@ -3,18 +3,19 @@
     <v-list
       v-if="items.length > 0"
       >
-      <v-list-item v-for="(item, i) in items" :key="item.item" class="pl-0 mb-1">
-        <v-list-item-content>
+      <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>
+        <v-list-item-content class="d-flex flex-row">
           <a :href="getItemUrl(item)">
             <v-list-item-title class="mb-2">
-              <span class="font-weight-bold">{{ hitCounter + i }})</span>
               <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">
               <span v-for="(matchItem, i) in item.matches" :key="i" class="d-flex mb-1">
                 <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 -->
@@ -22,7 +23,7 @@
             </v-list-item-subtitle>
             <!-- #TODO: add translation -->
             <!--<v-list-item-subtitle>Manifest: {{item.label}}</v-list-item-subtitle>-->
-            <v-list-item-subtitle>{{ getLanguage(item.lang) }} Edition</v-list-item-subtitle>
+            <v-list-item-subtitle class="">{{ getLanguage(item.lang) }} Edition</v-list-item-subtitle>
           </a>
         </v-list-item-content>
       </v-list-item>
@@ -93,6 +94,12 @@ a {
   text-decoration: none;
 }
 
+.numbering {
+  padding-top: 10px;
+  width: 48px;
+  text-align: right;
+}
+
 .result-container {
   min-height: 200px;
 }