put the abstract dropdown in toolbar title

components/content/ArticleDoi.vue

@@ -37,16 +37,22 @@ const articleAbstract = computed(() => {
     <template v-if="!mobile" #prepend>
       <v-icon icon="md:star" :color="props.isRelevant ? 'info' : 'transparent'"></v-icon>
     </template>
-    <template v-if="!mobile" #append>
+    <!-- <template v-if="!mobile" #append>
       <v-btn v-if="articleAbstract" size="x-small" variant="plain"
         :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'" class="px-0"
         @click.stop.prevent="show = !show">Abstract</v-btn>
-    </template>
+    </template> -->
     <v-card flat color="transparent" density="compact" class="my-0 article-ref">
-      <v-card-item density="compact" :class="mobile ? 'px-0 py-0' : 'py-0'">
-        <v-card-title class="py-0"><span class="font-weight-bold">{{
-          articleTitle
-        }}</span></v-card-title>
+      <v-card-item density="compact" class="pa-0">
+        <v-toolbar class="py-0 d-flex align-start article-toolbar" color="transparent"  :height="20">
+          <v-toolbar-title class="font-weight-bold ml-0">{{ articleTitle }}</v-toolbar-title>
+          <v-btn v-if="articleAbstract" size="x-small" variant="plain" color="primary"
+            :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'" class="px-0"
+            @click.stop.prevent="show = !show">Abstract</v-btn>
+        </v-toolbar>
+          <!-- <v-card-title class="py-0"><span class="font-weight-bold">{{
+            articleTitle
+          }}</span></v-card-title> -->
         <v-card-subtitle class="py-0">
           {{ article?.subtitle ?? "no authors" }}</v-card-subtitle>
         <v-card-subtitle class="py-0">
@@ -54,13 +60,10 @@ const articleAbstract = computed(() => {
             article?.year
           }})</v-card-subtitle>
       </v-card-item>
-      <v-card-item class="pa-0 pl-4">
-        <!-- <v-btn v-if="articleAbstract" size="x-small" variant="plain"
-          :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'" class="px-0"
-          @click.stop.prevent="show = !show">Abstract</v-btn> -->
+      <v-card-item class="pa-0">
         <v-expand-transition>
           <v-card v-show="show" flat color="transparent">
-            <v-card-text>
+            <v-card-text class="px-0">
               {{ articleAbstract }}
             </v-card-text>
           </v-card>
@@ -75,17 +78,20 @@ const articleAbstract = computed(() => {
   line-height: 1rem !important;
 }
 
-.article-ref .v-card-item * {
-  font-size: 0.9rem !important;
-}
+
 
 .article-ref .v-card-item .v-card-subtitle,
-.article-ref .v-card-item * .v-btn {
-  font-size: 0.8rem !important;
 
-}
 
 .article-ref .v-card-item button.v-btn span {
-  font-size: 0.5rem !important;
+  font-size: 0.8rem !important;
+}
+.article-toolbar .v-toolbar-title  {
+  font-size: 0.9rem !important;
 }
+
+.article-toolbar div.v-toolbar__content * {
+  align-items: flex-start;
+}
+
 </style>
\ No newline at end of file