refactor: pagination component usage

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/modules/contents/attachments/AttachmentList.vue

@@ -685,11 +685,9 @@ onMounted(() => {
           </ul>
 
           <template #footer>
-            <div class="flex items-center justify-end bg-white">
-              <div class="flex flex-1 items-center justify-end">
+            <div class="bg-white sm:flex sm:items-center sm:justify-end">
               <VPagination :page="1" :size="10" :total="20" />
             </div>
-            </div>
           </template>
         </VCard>
       </div>

src/modules/contents/comments/CommentList.vue

@@ -137,11 +137,9 @@ const checkAll = ref(false);
       </ul>
 
       <template #footer>
-        <div class="flex items-center justify-end bg-white">
-          <div class="flex flex-1 items-center justify-end">
+        <div class="bg-white sm:flex sm:items-center sm:justify-end">
           <VPagination :page="1" :size="10" :total="20" />
         </div>
-        </div>
       </template>
     </VCard>
   </div>

src/modules/contents/pages/PageList.vue

@@ -334,11 +334,9 @@ onMounted(() => {
           </ul>
 
           <template #footer>
-            <div class="flex items-center justify-end bg-white">
-              <div class="flex flex-1 items-center justify-end">
+            <div class="bg-white sm:flex sm:items-center sm:justify-end">
               <VPagination :page="1" :size="10" :total="20" />
             </div>
-            </div>
           </template>
         </VCard>
       </div>

src/modules/contents/posts/PostList.vue

@@ -400,11 +400,9 @@ onMounted(() => {
       </ul>
 
       <template #footer>
-        <div class="flex items-center justify-end bg-white">
-          <div class="flex flex-1 items-center justify-end">
+        <div class="bg-white sm:flex sm:items-center sm:justify-end">
           <VPagination :page="1" :size="10" :total="20" />
         </div>
-        </div>
       </template>
     </VCard>
   </div>

src/modules/system/plugins/PluginList.vue

@@ -383,11 +383,9 @@ onMounted(handleFetchPlugins);
       </ul>
 
       <template #footer>
-        <div class="flex items-center justify-end bg-white">
-          <div class="flex flex-1 items-center justify-end">
+        <div class="bg-white sm:flex sm:items-center sm:justify-end">
           <VPagination :page="1" :size="10" :total="20" />
         </div>
-        </div>
       </template>
     </VCard>
   </div>

src/modules/system/roles/RoleList.vue

@@ -210,11 +210,9 @@ onMounted(() => {
       </ul>
 
       <template #footer>
-        <div class="flex items-center justify-end bg-white">
-          <div class="flex flex-1 items-center justify-end">
+        <div class="bg-white sm:flex sm:items-center sm:justify-end">
           <VPagination :page="1" :size="10" :total="20" />
         </div>
-        </div>
       </template>
     </VCard>
   </div>

src/modules/system/users/UserList.vue

@@ -273,15 +273,13 @@ onMounted(() => {
       </ul>
 
       <template #footer>
-        <div class="flex items-center justify-end bg-white">
-          <div class="flex flex-1 items-center justify-end">
+        <div class="bg-white sm:flex sm:items-center sm:justify-end">
           <VPagination
             v-model:page="pagination.page"
             v-model:size="pagination.size"
             :total="pagination.total"
           />
         </div>
-        </div>
       </template>
     </VCard>
   </div>