a bit more responsive

components/content/ArticleDoi.vue

 <script setup lang="ts">
+import { useDisplay } from 'vuetify'
+
 const props = defineProps<{
-    doi: string;
+    index: number
+    doi: string
     divider: boolean
     title?: string
     abstract?: string
 }>();
 
 const { article } = useFetchArticle(props.doi)
-
+const { mobile } = useDisplay()
 const show = ref(false)
 console.log(article)
 
@@ -16,26 +19,30 @@ const articleAbstract = computed(() => { return props.abstract ?? article.value?
 
 </script>
 <template>
-    <v-list-item :href="article?.href" :target="article?.target">
-        <template #prepend>
+    <v-list-item :href="article?.href" :target="article?.target" density="compact" class="px-0">
+        <template #prepend v-if="!mobile">
+            <v-avatar color="primary" size="small" density="compact" variant="tonal">
+                {{ props.index }}
+            </v-avatar>
+        </template>
+        <!-- <template #append v-if="!mobile">
             <v-avatar>
                 <v-icon>{{ article?.prependIcon }}</v-icon>
             </v-avatar>
-        </template>
-        <v-card flat color="transparent" density="compact">
-
-            <v-card-item density="compact">
+        </template> -->
+        <v-card flat color="transparent" density="compact" class="my-0">
+            <v-card-item density="compact" :class="mobile ? 'px-0' : null">
                 <v-card-title><span class="text-subtitle-1 font-weight-bold">{{ articleTitle
                 }}</span></v-card-title>
                 <v-card-subtitle> {{ article?.subtitle ?? "no subtitle" }}</v-card-subtitle>
                 <v-card-subtitle> {{ article?.containerTitle ?? "no containerTitle" }} ({{ article?.year
                 }})</v-card-subtitle>
             </v-card-item>
-            <v-card-actions v-if="articleAbstract" density="compact">
-                <v-btn size="x-small" variant="outlined" :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+            <v-card-item density="compact" :class="mobile ? 'px-0' : null">
+                <v-btn v-if="articleAbstract" size="x-small" variant="outlined"
+                    :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
                     @click.stop.prevent="show = !show">Abstract</v-btn>
-            </v-card-actions>
-
+            </v-card-item>
             <v-expand-transition>
                 <v-card v-show="show" flat color="transparent">
                     <v-card-text>

components/content/ArticleDoiList.vue

@@ -4,9 +4,8 @@ const props = defineProps<{
 }>();
 </script>
 <template>
-    <v-list>
-        <ArticleDoi v-for="item in props.items" :key="item.doi" :doi="item.doi" :title="item?.title"
-            :divider="item.divider" :abstract="item?.abstract" />
-
+    <v-list density="compact">
+        <ArticleDoi v-for="item, index in props.items" :key="item.doi" :index="index + 1" :doi="item.doi"
+            :title="item?.title" :divider="item.divider" :abstract="item?.abstract" />
     </v-list>
 </template>
\ No newline at end of file

layouts/article.vue

 <script setup lang="ts">
 const { page, surround } = useContent();
 import { useCustomTheme } from '~/composables/useCustomTheme'
+import { useDisplay } from 'vuetify'
 
 const { isDark } = useCustomTheme()
+const { mobile } = useDisplay()
 
 </script>
 <template>
@@ -17,10 +19,10 @@ const { isDark } = useCustomTheme()
           </v-card> -->
         <EditGitlab />
         <v-row justify="space-between">
-          <v-col v-for="(surroundPage, i) in surround" :key="surroundPage?._id" cols="auto">
+          <v-col v-for="(surroundPage, i) in surround" :key="surroundPage?._id" :cols="mobile ? '12' : 'auto'">
             <v-btn v-if="surroundPage" :prepend-icon="i === 0 ? 'mdi-arrow-left' : undefined"
-              :append-icon="i === 1 ? 'mdi-arrow-right' : undefined" variant="outlined" color="primary"
-              :to="surroundPage?._path">{{ surroundPage?.title }}</v-btn>
+              :append-icon="i === 1 ? 'mdi-arrow-right' : undefined" :block="mobile ? true : false" variant="outlined"
+              color="primary" :to="surroundPage?._path">{{ surroundPage?.title }}</v-btn>
           </v-col>
         </v-row>
       </v-container>

pages/defense-systems.vue

@@ -44,10 +44,8 @@ const systems = computed(() => {
 
 </script>
 <template>
-    <v-card>
+    <v-card flat color="transparent">
         <v-card-title>List systems</v-card-title>
-        <v-card-text>
-            <ListSystems :headers=headers :systems="systems"></ListSystems>
-        </v-card-text>
+        <ListSystems :headers=headers :systems="systems"></ListSystems>
     </v-card>
 </template>
\ No newline at end of file