fix layout

src/styles/styles.scss

@@ -20,22 +20,6 @@
   margin-bottom: env(safe-area-inset-top);
 }
 
-
-.centered {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
-}
-
-
-.top-centered {
-  position: absolute;
-  inset-block-start: 20%;
-  inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .v-dialog > .v-overlay__content {
   margin-top: calc(env(safe-area-inset-top) + 1rem);
   max-height: calc(100% - env(safe-area-inset-top) - 1rem);

src/views/discover/MediaCardListView.vue

@@ -123,13 +123,16 @@ async function fetchData({ done }: { done: any }) {
 </script>
 
 <template>
-  <VProgressCircular
+  <div
     v-if="!isRefreshed"
-    size="48"
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
-    class="centered"
+  >
-    indeterminate
+    <VProgressCircular
-    color="primary"
+      size="48"
-  />
+      indeterminate
+      color="primary"
+    />
+  </div>
   <VInfiniteScroll
     mode="intersect"
     side="end"

src/views/discover/TorrentCardListView.vue

@@ -377,23 +377,22 @@ onBeforeMount(fetchData)
       </VCol>
     </VRow>
   </VCard>
-  <VProgressCircular
-    v-if="!isRefreshed && !props.keyword"
-    size="48"
-    class="centered"
-    indeterminate
-    color="primary"
-  />
   <div
-    v-if="!isRefreshed && props.keyword"
+    v-if="!isRefreshed"
-    class="top-centered mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
   >
     <VProgressCircular
+      v-if="!props.keyword"
+      size="48"
+      indeterminate
+      color="primary"
+    />
+    <VProgressCircular
+      v-if="props.keyword"
       class="mb-3"
       color="primary"
       :model-value="progressValue"
       size="64"
-      width="7"
     />
     <span>{{ progressText }}</span>
   </div>

src/views/plugin/PluginCardListView.vue

@@ -51,13 +51,17 @@ onBeforeMount(fetchData)
 </script>
 
 <template>
-  <VProgressCircular
+  <div
     v-if="!isRefreshed"
-    size="48"
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
-    class="centered"
+  >
-    indeterminate
+    <VProgressCircular
-    color="primary"
+      v-if="!isRefreshed"
-  />
+      size="48"
+      indeterminate
+      color="primary"
+    />
+  </div>
   <div
     v-if="dataList.length > 0"
     class="grid gap-3 grid-plugin-card"
@@ -88,7 +92,7 @@ onBeforeMount(fetchData)
         icon="mdi-plus"
         v-bind="props"
         size="x-large"
-        class="absolute right-5 bottom-5"
+        class="fixed right-5 bottom-5"
       />
     </template>
 

src/views/reorganize/DownloadingListView.vue

@@ -55,13 +55,17 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VProgressCircular
+  <div
     v-if="!isRefreshed"
-    size="48"
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
-    class="centered"
+  >
-    indeterminate
+    <VProgressCircular
-    color="primary"
+      v-if="!isRefreshed"
-  />
+      size="48"
+      indeterminate
+      color="primary"
+    />
+  </div>
   <PullRefresh
     v-model="loading"
     @refresh="onRefresh"

src/views/site/SiteCardListView.vue

@@ -26,13 +26,17 @@ onBeforeMount(fetchData)
 </script>
 
 <template>
-  <VProgressCircular
+  <div
     v-if="!isRefreshed"
-    size="48"
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
-    class="centered"
+  >
-    indeterminate
+    <VProgressCircular
-    color="primary"
+      v-if="!isRefreshed"
-  />
+      size="48"
+      indeterminate
+      color="primary"
+    />
+  </div>
   <div
     v-if="dataList.length > 0"
     class="grid gap-3 grid-site-card"

src/views/subscribe/SubscribeListView.vue

@@ -47,13 +47,17 @@ const filteredDataList = computed(() => {
 </script>
 
 <template>
-  <VProgressCircular
+  <div
     v-if="!isRefreshed"
-    size="48"
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
-    class="centered"
+  >
-    indeterminate
+    <VProgressCircular
-    color="primary"
+      v-if="!isRefreshed"
-  />
+      size="48"
+      indeterminate
+      color="primary"
+    />
+  </div>
   <PullRefresh
     v-model="loading"
     @refresh="onRefresh"