优化多个组件的样式，调整卡片布局和间距，更新网格列数以适应不同屏幕尺寸

src/views/subscribe/SubscribeListView.vue

@@ -173,7 +173,7 @@ useDynamicButton({
     handle=".cursor-move"
     item-key="id"
     tag="div"
-    :component-data="{ class: 'grid gap-4 grid-subscribe-card' }"
+    :component-data="{ class: 'grid gap-4 grid-subscribe-card px-2' }"
   >
     <template #item="{ element }">
       <SubscribeCard :key="element.id" :media="element" @remove="fetchData" @save="fetchData" />

src/views/subscribe/SubscribePopularView.vue

@@ -111,7 +111,7 @@ async function fetchData({ done }: { done: any }) {
 
 <template>
   <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-  <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible" @load="fetchData">
+  <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible px-2" @load="fetchData">
     <template #loading />
     <template #empty />
     <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">

src/views/subscribe/SubscribeShareView.vue

@@ -121,7 +121,7 @@ function removeData(id: number) {
 <template>
   <VPageContentTitle v-if="keyword" :title="`${t('common.search')}：${keyword}`" />
   <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-  <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible" @load="fetchData">
+  <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible px-2" @load="fetchData">
     <template #loading />
     <template #empty />
     <div v-if="dataList.length > 0" class="grid gap-4 grid-subscribe-card" tabindex="0">