From 83cb088df84fdd65364dc506d89d851271fc7ad9 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 15 Sep 2023 00:14:14 +0800
Subject: [PATCH] feat: improve the styles of the data list filter area on the
 mobile devices (#4587)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.10.x

#### What this PR does / why we need it:

改进移动设备上数据列表过滤器区域的样式。

before:

<img width="429" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/c0341b19-0ef5-4e26-94b7-71c52def6578">

after:

<img width="429" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/b2d0f07b-d94d-48d4-86b9-fd2953d141fa">


#### Which issue(s) this PR fixes:

Ref https://github.com/halo-dev/halo/issues/2699

#### Does this PR introduce a user-facing change?

```release-note
改进 Console 端在移动设备上数据列表过滤器区域的样式。
```
---
 console/src/components/input/SearchInput.vue  |   2 +-
 .../contents/attachments/AttachmentList.vue   | 172 ++++++++--------
 .../modules/contents/comments/CommentList.vue | 172 ++++++++--------
 .../contents/pages/DeletedSinglePageList.vue  |  30 ++-
 .../modules/contents/pages/SinglePageList.vue | 172 ++++++++--------
 .../contents/posts/DeletedPostList.vue        |  30 ++-
 .../src/modules/contents/posts/PostList.vue   | 188 +++++++++---------
 .../src/modules/system/plugins/PluginList.vue | 112 +++++------
 console/src/modules/system/users/UserList.vue | 114 ++++++-----
 9 files changed, 480 insertions(+), 512 deletions(-)

diff --git a/console/src/components/input/SearchInput.vue b/console/src/components/input/SearchInput.vue
index cc4f154d7..803d53c0f 100644
--- a/console/src/components/input/SearchInput.vue
+++ b/console/src/components/input/SearchInput.vue
@@ -35,7 +35,7 @@ function onKeywordChange() {
 <template>
   <FormKit
     :id="id"
-    outer-class="!p-0"
+    outer-class="!p-0 w-full sm:w-auto"
     :placeholder="placeholder || $t('core.common.placeholder.search')"
     type="text"
     name="keyword"
diff --git a/console/src/modules/contents/attachments/AttachmentList.vue b/console/src/modules/contents/attachments/AttachmentList.vue
index 71efe15fa..0295226d8 100644
--- a/console/src/modules/contents/attachments/AttachmentList.vue
+++ b/console/src/modules/contents/attachments/AttachmentList.vue
@@ -293,11 +293,11 @@ onMounted(() => {
           <template #header>
             <div class="block w-full bg-gray-50 px-4 py-3">
               <div
-                class="relative flex flex-col items-start sm:flex-row sm:items-center"
+                class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
               >
                 <div
                   v-permission="['system:attachments:manage']"
-                  class="mr-4 hidden items-center sm:flex"
+                  class="hidden items-center sm:flex"
                 >
                   <input
                     v-model="checkedAll"
@@ -336,95 +336,89 @@ onMounted(() => {
                     </VDropdown>
                   </VSpace>
                 </div>
-                <div class="mt-4 flex sm:mt-0">
-                  <VSpace spacing="lg">
-                    <FilterCleanButton
-                      v-if="hasFilters"
-                      @click="handleClearFilters"
-                    />
-                    <FilterDropdown
-                      v-model="selectedPolicy"
-                      :label="
-                        $t('core.attachment.filters.storage_policy.label')
-                      "
-                      :items="[
-                        {
-                          label: t('core.common.filters.item_labels.all'),
-                        },
-                        ...(policies?.map((policy) => {
-                          return {
-                            label: policy.spec.displayName,
-                            value: policy.metadata.name,
-                          };
-                        }) || []),
-                      ]"
-                    />
-                    <UserFilterDropdown
-                      v-model="selectedUser"
-                      :label="$t('core.attachment.filters.owner.label')"
-                    />
-                    <FilterDropdown
-                      v-model="selectedSort"
-                      :label="$t('core.common.filters.labels.sort')"
-                      :items="[
-                        {
-                          label: t('core.common.filters.item_labels.default'),
-                        },
-                        {
-                          label: t(
-                            'core.attachment.filters.sort.items.create_time_desc'
-                          ),
-                          value: 'creationTimestamp,desc',
-                        },
-                        {
-                          label: t(
-                            'core.attachment.filters.sort.items.create_time_asc'
-                          ),
-                          value: 'creationTimestamp,asc',
-                        },
-                        {
-                          label: t(
-                            'core.attachment.filters.sort.items.size_desc'
-                          ),
-                          value: 'size,desc',
-                        },
-                        {
-                          label: t(
-                            'core.attachment.filters.sort.items.size_asc'
-                          ),
-                          value: 'size,asc',
-                        },
-                      ]"
-                    />
-                    <div class="flex flex-row gap-2">
-                      <div
-                        v-for="(item, index) in viewTypes"
-                        :key="index"
-                        v-tooltip="`${item.tooltip}`"
-                        :class="{
-                          'bg-gray-200 font-bold text-black':
-                            viewType === item.name,
-                        }"
-                        class="cursor-pointer rounded p-1 hover:bg-gray-200"
-                        @click="viewType = item.name"
-                      >
-                        <component :is="item.icon" class="h-4 w-4" />
-                      </div>
+                <VSpace spacing="lg" class="flex-wrap">
+                  <FilterCleanButton
+                    v-if="hasFilters"
+                    @click="handleClearFilters"
+                  />
+                  <FilterDropdown
+                    v-model="selectedPolicy"
+                    :label="$t('core.attachment.filters.storage_policy.label')"
+                    :items="[
+                      {
+                        label: t('core.common.filters.item_labels.all'),
+                      },
+                      ...(policies?.map((policy) => {
+                        return {
+                          label: policy.spec.displayName,
+                          value: policy.metadata.name,
+                        };
+                      }) || []),
+                    ]"
+                  />
+                  <UserFilterDropdown
+                    v-model="selectedUser"
+                    :label="$t('core.attachment.filters.owner.label')"
+                  />
+                  <FilterDropdown
+                    v-model="selectedSort"
+                    :label="$t('core.common.filters.labels.sort')"
+                    :items="[
+                      {
+                        label: t('core.common.filters.item_labels.default'),
+                      },
+                      {
+                        label: t(
+                          'core.attachment.filters.sort.items.create_time_desc'
+                        ),
+                        value: 'creationTimestamp,desc',
+                      },
+                      {
+                        label: t(
+                          'core.attachment.filters.sort.items.create_time_asc'
+                        ),
+                        value: 'creationTimestamp,asc',
+                      },
+                      {
+                        label: t(
+                          'core.attachment.filters.sort.items.size_desc'
+                        ),
+                        value: 'size,desc',
+                      },
+                      {
+                        label: t('core.attachment.filters.sort.items.size_asc'),
+                        value: 'size,asc',
+                      },
+                    ]"
+                  />
+                  <div class="flex flex-row gap-2">
+                    <div
+                      v-for="(item, index) in viewTypes"
+                      :key="index"
+                      v-tooltip="`${item.tooltip}`"
+                      :class="{
+                        'bg-gray-200 font-bold text-black':
+                          viewType === item.name,
+                      }"
+                      class="cursor-pointer rounded p-1 hover:bg-gray-200"
+                      @click="viewType = item.name"
+                    >
+                      <component :is="item.icon" class="h-4 w-4" />
                     </div>
-                    <div class="flex flex-row gap-2">
-                      <div
-                        class="group cursor-pointer rounded p-1 hover:bg-gray-200"
-                        @click="handleFetchAttachments()"
-                      >
-                        <IconRefreshLine
-                          v-tooltip="$t('core.common.buttons.refresh')"
-                          :class="{ 'animate-spin text-gray-900': isFetching }"
-                          class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                        />
-                      </div>
+                  </div>
+                  <div class="flex flex-row gap-2">
+                    <div
+                      class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+                      @click="handleFetchAttachments()"
+                    >
+                      <IconRefreshLine
+                        v-tooltip="$t('core.common.buttons.refresh')"
+                        :class="{ 'animate-spin text-gray-900': isFetching }"
+                        class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                      />
                     </div>
-                  </VSpace>
-                </div>
+                  </div>
+                </VSpace>
               </div>
             </div>
           </template>
diff --git a/console/src/modules/contents/comments/CommentList.vue b/console/src/modules/contents/comments/CommentList.vue
index bab6424d7..37797c042 100644
--- a/console/src/modules/contents/comments/CommentList.vue
+++ b/console/src/modules/contents/comments/CommentList.vue
@@ -228,11 +228,11 @@ const handleApproveInBatch = async () => {
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
           >
             <div
               v-permission="['system:comments:manage']"
-              class="mr-4 hidden items-center sm:flex"
+              class="hidden items-center sm:flex"
             >
               <input
                 v-model="checkAll"
@@ -259,94 +259,88 @@ const handleApproveInBatch = async () => {
                 </VButton>
               </VSpace>
             </div>
-            <div class="mt-4 flex sm:mt-0">
-              <VSpace spacing="lg">
-                <FilterCleanButton
-                  v-if="hasFilters"
-                  @click="handleClearFilters"
-                />
-                <FilterDropdown
-                  v-model="selectedApprovedStatus"
-                  :label="$t('core.common.filters.labels.status')"
-                  :items="[
-                    {
-                      label: t('core.common.filters.item_labels.all'),
-                    },
-                    {
-                      label: t('core.comment.filters.status.items.approved'),
-                      value: 'true',
-                    },
-                    {
-                      label: t(
-                        'core.comment.filters.status.items.pending_review'
-                      ),
-                      value: 'false',
-                    },
-                  ]"
-                />
-                <UserFilterDropdown
-                  v-model="selectedUser"
-                  :label="$t('core.comment.filters.owner.label')"
-                />
-                <FilterDropdown
-                  v-model="selectedSort"
-                  :label="$t('core.common.filters.labels.sort')"
-                  :items="[
-                    {
-                      label: t('core.common.filters.item_labels.default'),
-                    },
-                    {
-                      label: t(
-                        'core.comment.filters.sort.items.last_reply_time_desc'
-                      ),
-                      value: 'lastReplyTime,desc',
-                    },
-                    {
-                      label: t(
-                        'core.comment.filters.sort.items.last_reply_time_asc'
-                      ),
-                      value: 'lastReplyTime,asc',
-                    },
-                    {
-                      label: t(
-                        'core.comment.filters.sort.items.reply_count_desc'
-                      ),
-                      value: 'replyCount,desc',
-                    },
-                    {
-                      label: t(
-                        'core.comment.filters.sort.items.reply_count_asc'
-                      ),
-                      value: 'replyCount,asc',
-                    },
-                    {
-                      label: t(
-                        'core.comment.filters.sort.items.create_time_desc'
-                      ),
-                      value: 'creationTimestamp,desc',
-                    },
-                    {
-                      label: t(
-                        'core.comment.filters.sort.items.create_time_asc'
-                      ),
-                      value: 'creationTimestamp,asc',
-                    },
-                  ]"
-                />
-                <div class="flex flex-row gap-2">
-                  <div
-                    class="group cursor-pointer rounded p-1 hover:bg-gray-200"
-                    @click="refetch()"
-                  >
-                    <IconRefreshLine
-                      v-tooltip="$t('core.common.buttons.refresh')"
-                      :class="{ 'animate-spin text-gray-900': isFetching }"
-                      class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                    />
-                  </div>
+            <VSpace spacing="lg" class="flex-wrap">
+              <FilterCleanButton
+                v-if="hasFilters"
+                @click="handleClearFilters"
+              />
+              <FilterDropdown
+                v-model="selectedApprovedStatus"
+                :label="$t('core.common.filters.labels.status')"
+                :items="[
+                  {
+                    label: t('core.common.filters.item_labels.all'),
+                  },
+                  {
+                    label: t('core.comment.filters.status.items.approved'),
+                    value: 'true',
+                  },
+                  {
+                    label: t(
+                      'core.comment.filters.status.items.pending_review'
+                    ),
+                    value: 'false',
+                  },
+                ]"
+              />
+              <UserFilterDropdown
+                v-model="selectedUser"
+                :label="$t('core.comment.filters.owner.label')"
+              />
+              <FilterDropdown
+                v-model="selectedSort"
+                :label="$t('core.common.filters.labels.sort')"
+                :items="[
+                  {
+                    label: t('core.common.filters.item_labels.default'),
+                  },
+                  {
+                    label: t(
+                      'core.comment.filters.sort.items.last_reply_time_desc'
+                    ),
+                    value: 'lastReplyTime,desc',
+                  },
+                  {
+                    label: t(
+                      'core.comment.filters.sort.items.last_reply_time_asc'
+                    ),
+                    value: 'lastReplyTime,asc',
+                  },
+                  {
+                    label: t(
+                      'core.comment.filters.sort.items.reply_count_desc'
+                    ),
+                    value: 'replyCount,desc',
+                  },
+                  {
+                    label: t('core.comment.filters.sort.items.reply_count_asc'),
+                    value: 'replyCount,asc',
+                  },
+                  {
+                    label: t(
+                      'core.comment.filters.sort.items.create_time_desc'
+                    ),
+                    value: 'creationTimestamp,desc',
+                  },
+                  {
+                    label: t('core.comment.filters.sort.items.create_time_asc'),
+                    value: 'creationTimestamp,asc',
+                  },
+                ]"
+              />
+              <div class="flex flex-row gap-2">
+                <div
+                  class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+                  @click="refetch()"
+                >
+                  <IconRefreshLine
+                    v-tooltip="$t('core.common.buttons.refresh')"
+                    :class="{ 'animate-spin text-gray-900': isFetching }"
+                    class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                  />
                 </div>
-              </VSpace>
-            </div>
+              </div>
+            </VSpace>
           </div>
         </div>
       </template>
diff --git a/console/src/modules/contents/pages/DeletedSinglePageList.vue b/console/src/modules/contents/pages/DeletedSinglePageList.vue
index dc08f2c59..4cfc8990a 100644
--- a/console/src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/console/src/modules/contents/pages/DeletedSinglePageList.vue
@@ -233,11 +233,11 @@ watch(
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
           >
             <div
               v-permission="['system:singlepages:manage']"
-              class="mr-4 hidden items-center sm:flex"
+              class="hidden items-center sm:flex"
             >
               <input
                 v-model="checkedAll"
@@ -257,21 +257,19 @@ watch(
                 </VButton>
               </VSpace>
             </div>
-            <div class="mt-4 flex sm:mt-0">
-              <VSpace spacing="lg">
-                <div class="flex flex-row gap-2">
-                  <div
-                    class="group cursor-pointer rounded p-1 hover:bg-gray-200"
-                    @click="refetch()"
-                  >
-                    <IconRefreshLine
-                      :class="{ 'animate-spin text-gray-900': isFetching }"
-                      class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                    />
-                  </div>
+            <VSpace spacing="lg" class="flex-wrap">
+              <div class="flex flex-row gap-2">
+                <div
+                  class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+                  @click="refetch()"
+                >
+                  <IconRefreshLine
+                    :class="{ 'animate-spin text-gray-900': isFetching }"
+                    class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                  />
                 </div>
-              </VSpace>
-            </div>
+              </div>
+            </VSpace>
           </div>
         </div>
       </template>
diff --git a/console/src/modules/contents/pages/SinglePageList.vue b/console/src/modules/contents/pages/SinglePageList.vue
index 4b12228d0..2566f77f0 100644
--- a/console/src/modules/contents/pages/SinglePageList.vue
+++ b/console/src/modules/contents/pages/SinglePageList.vue
@@ -317,11 +317,11 @@ watch(selectedPageNames, (newValue) => {
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
           >
             <div
               v-permission="['system:singlepages:manage']"
-              class="mr-4 hidden items-center sm:flex"
+              class="hidden items-center sm:flex"
             >
               <input
                 v-model="checkedAll"
@@ -338,93 +338,89 @@ watch(selectedPageNames, (newValue) => {
                 </VButton>
               </VSpace>
             </div>
-            <div class="mt-4 flex sm:mt-0">
-              <VSpace spacing="lg">
-                <FilterCleanButton
-                  v-if="hasFilters"
-                  @click="handleClearFilters"
-                />
-                <FilterDropdown
-                  v-model="selectedPublishStatus"
-                  :label="$t('core.common.filters.labels.status')"
-                  :items="[
-                    {
-                      label: t('core.common.filters.item_labels.all'),
-                      value: undefined,
-                    },
-                    {
-                      label: t('core.page.filters.status.items.published'),
-                      value: 'true',
-                    },
-                    {
-                      label: t('core.page.filters.status.items.draft'),
-                      value: 'false',
-                    },
-                  ]"
-                />
-                <FilterDropdown
-                  v-model="selectedVisible"
-                  :label="$t('core.page.filters.visible.label')"
-                  :items="[
-                    {
-                      label: t('core.common.filters.item_labels.all'),
-                      value: undefined,
-                    },
-                    {
-                      label: t('core.page.filters.visible.items.public'),
-                      value: 'PUBLIC',
-                    },
-                    {
-                      label: t('core.page.filters.visible.items.private'),
-                      value: 'PRIVATE',
-                    },
-                  ]"
-                />
-                <UserFilterDropdown
-                  v-model="selectedContributor"
-                  :label="$t('core.page.filters.author.label')"
-                />
-                <FilterDropdown
-                  v-model="selectedSort"
-                  :label="$t('core.common.filters.labels.sort')"
-                  :items="[
-                    {
-                      label: t('core.common.filters.item_labels.default'),
-                    },
-                    {
-                      label: t(
-                        'core.page.filters.sort.items.publish_time_desc'
-                      ),
-                      value: 'publishTime,desc',
-                    },
-                    {
-                      label: t('core.page.filters.sort.items.publish_time_asc'),
-                      value: 'publishTime,asc',
-                    },
-                    {
-                      label: t('core.page.filters.sort.items.create_time_desc'),
-                      value: 'creationTimestamp,desc',
-                    },
-                    {
-                      label: t('core.page.filters.sort.items.create_time_asc'),
-                      value: 'creationTimestamp,asc',
-                    },
-                  ]"
-                />
-                <div class="flex flex-row gap-2">
-                  <div
-                    class="group cursor-pointer rounded p-1 hover:bg-gray-200"
-                    @click="refetch()"
-                  >
-                    <IconRefreshLine
-                      v-tooltip="$t('core.common.buttons.refresh')"
-                      :class="{ 'animate-spin text-gray-900': isFetching }"
-                      class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                    />
-                  </div>
+            <VSpace spacing="lg" class="flex-wrap">
+              <FilterCleanButton
+                v-if="hasFilters"
+                @click="handleClearFilters"
+              />
+              <FilterDropdown
+                v-model="selectedPublishStatus"
+                :label="$t('core.common.filters.labels.status')"
+                :items="[
+                  {
+                    label: t('core.common.filters.item_labels.all'),
+                    value: undefined,
+                  },
+                  {
+                    label: t('core.page.filters.status.items.published'),
+                    value: 'true',
+                  },
+                  {
+                    label: t('core.page.filters.status.items.draft'),
+                    value: 'false',
+                  },
+                ]"
+              />
+              <FilterDropdown
+                v-model="selectedVisible"
+                :label="$t('core.page.filters.visible.label')"
+                :items="[
+                  {
+                    label: t('core.common.filters.item_labels.all'),
+                    value: undefined,
+                  },
+                  {
+                    label: t('core.page.filters.visible.items.public'),
+                    value: 'PUBLIC',
+                  },
+                  {
+                    label: t('core.page.filters.visible.items.private'),
+                    value: 'PRIVATE',
+                  },
+                ]"
+              />
+              <UserFilterDropdown
+                v-model="selectedContributor"
+                :label="$t('core.page.filters.author.label')"
+              />
+              <FilterDropdown
+                v-model="selectedSort"
+                :label="$t('core.common.filters.labels.sort')"
+                :items="[
+                  {
+                    label: t('core.common.filters.item_labels.default'),
+                  },
+                  {
+                    label: t('core.page.filters.sort.items.publish_time_desc'),
+                    value: 'publishTime,desc',
+                  },
+                  {
+                    label: t('core.page.filters.sort.items.publish_time_asc'),
+                    value: 'publishTime,asc',
+                  },
+                  {
+                    label: t('core.page.filters.sort.items.create_time_desc'),
+                    value: 'creationTimestamp,desc',
+                  },
+                  {
+                    label: t('core.page.filters.sort.items.create_time_asc'),
+                    value: 'creationTimestamp,asc',
+                  },
+                ]"
+              />
+              <div class="flex flex-row gap-2">
+                <div
+                  class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+                  @click="refetch()"
+                >
+                  <IconRefreshLine
+                    v-tooltip="$t('core.common.buttons.refresh')"
+                    :class="{ 'animate-spin text-gray-900': isFetching }"
+                    class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                  />
                 </div>
-              </VSpace>
-            </div>
+              </div>
+            </VSpace>
           </div>
         </div>
       </template>
diff --git a/console/src/modules/contents/posts/DeletedPostList.vue b/console/src/modules/contents/posts/DeletedPostList.vue
index 70c002bac..5aa5a0432 100644
--- a/console/src/modules/contents/posts/DeletedPostList.vue
+++ b/console/src/modules/contents/posts/DeletedPostList.vue
@@ -225,11 +225,11 @@ watch(
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
           >
             <div
               v-permission="['system:posts:manage']"
-              class="mr-4 hidden items-center sm:flex"
+              class="hidden items-center sm:flex"
             >
               <input
                 v-model="checkedAll"
@@ -249,21 +249,19 @@ watch(
                 </VButton>
               </VSpace>
             </div>
-            <div class="mt-4 flex sm:mt-0">
-              <VSpace spacing="lg">
-                <div class="flex flex-row gap-2">
-                  <div
-                    class="group cursor-pointer rounded p-1 hover:bg-gray-200"
-                    @click="refetch()"
-                  >
-                    <IconRefreshLine
-                      :class="{ 'animate-spin text-gray-900': isFetching }"
-                      class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                    />
-                  </div>
+            <VSpace spacing="lg" class="flex-wrap">
+              <div class="flex flex-row gap-2">
+                <div
+                  class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+                  @click="refetch()"
+                >
+                  <IconRefreshLine
+                    :class="{ 'animate-spin text-gray-900': isFetching }"
+                    class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                  />
                 </div>
-              </VSpace>
-            </div>
+              </div>
+            </VSpace>
           </div>
         </div>
       </template>
diff --git a/console/src/modules/contents/posts/PostList.vue b/console/src/modules/contents/posts/PostList.vue
index 1cd96f444..9e1285e11 100644
--- a/console/src/modules/contents/posts/PostList.vue
+++ b/console/src/modules/contents/posts/PostList.vue
@@ -323,11 +323,11 @@ watch(selectedPostNames, (newValue) => {
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
           >
             <div
               v-permission="['system:posts:manage']"
-              class="mr-4 hidden items-center sm:flex"
+              class="hidden items-center sm:flex"
             >
               <input
                 v-model="checkedAll"
@@ -344,101 +344,97 @@ watch(selectedPostNames, (newValue) => {
                 </VButton>
               </VSpace>
             </div>
-            <div class="mt-4 flex sm:mt-0">
-              <VSpace spacing="lg">
-                <FilterCleanButton
-                  v-if="hasFilters"
-                  @click="handleClearFilters"
-                />
-                <FilterDropdown
-                  v-model="selectedPublishStatus"
-                  :label="$t('core.common.filters.labels.status')"
-                  :items="[
-                    {
-                      label: t('core.common.filters.item_labels.all'),
-                      value: undefined,
-                    },
-                    {
-                      label: t('core.post.filters.status.items.published'),
-                      value: 'true',
-                    },
-                    {
-                      label: t('core.post.filters.status.items.draft'),
-                      value: 'false',
-                    },
-                  ]"
-                />
-                <FilterDropdown
-                  v-model="selectedVisible"
-                  :label="$t('core.post.filters.visible.label')"
-                  :items="[
-                    {
-                      label: t('core.common.filters.item_labels.all'),
-                      value: undefined,
-                    },
-                    {
-                      label: t('core.post.filters.visible.items.public'),
-                      value: 'PUBLIC',
-                    },
-                    {
-                      label: t('core.post.filters.visible.items.private'),
-                      value: 'PRIVATE',
-                    },
-                  ]"
-                />
-                <CategoryFilterDropdown
-                  v-model="selectedCategory"
-                  :label="$t('core.post.filters.category.label')"
-                />
-                <TagFilterDropdown
-                  v-model="selectedTag"
-                  :label="$t('core.post.filters.tag.label')"
-                />
-                <UserFilterDropdown
-                  v-model="selectedContributor"
-                  :label="$t('core.post.filters.author.label')"
-                />
-                <FilterDropdown
-                  v-model="selectedSort"
-                  :label="$t('core.common.filters.labels.sort')"
-                  :items="[
-                    {
-                      label: t('core.common.filters.item_labels.default'),
-                    },
-                    {
-                      label: t(
-                        'core.post.filters.sort.items.publish_time_desc'
-                      ),
-                      value: 'publishTime,desc',
-                    },
-                    {
-                      label: t('core.post.filters.sort.items.publish_time_asc'),
-                      value: 'publishTime,asc',
-                    },
-                    {
-                      label: t('core.post.filters.sort.items.create_time_desc'),
-                      value: 'creationTimestamp,desc',
-                    },
-                    {
-                      label: t('core.post.filters.sort.items.create_time_asc'),
-                      value: 'creationTimestamp,asc',
-                    },
-                  ]"
-                />
-                <div class="flex flex-row gap-2">
-                  <div
-                    class="group cursor-pointer rounded p-1 hover:bg-gray-200"
-                    @click="refetch()"
-                  >
-                    <IconRefreshLine
-                      v-tooltip="$t('core.common.buttons.refresh')"
-                      :class="{ 'animate-spin text-gray-900': isFetching }"
-                      class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                    />
-                  </div>
+            <VSpace spacing="lg" class="flex-wrap">
+              <FilterCleanButton
+                v-if="hasFilters"
+                @click="handleClearFilters"
+              />
+              <FilterDropdown
+                v-model="selectedPublishStatus"
+                :label="$t('core.common.filters.labels.status')"
+                :items="[
+                  {
+                    label: t('core.common.filters.item_labels.all'),
+                    value: undefined,
+                  },
+                  {
+                    label: t('core.post.filters.status.items.published'),
+                    value: 'true',
+                  },
+                  {
+                    label: t('core.post.filters.status.items.draft'),
+                    value: 'false',
+                  },
+                ]"
+              />
+              <FilterDropdown
+                v-model="selectedVisible"
+                :label="$t('core.post.filters.visible.label')"
+                :items="[
+                  {
+                    label: t('core.common.filters.item_labels.all'),
+                    value: undefined,
+                  },
+                  {
+                    label: t('core.post.filters.visible.items.public'),
+                    value: 'PUBLIC',
+                  },
+                  {
+                    label: t('core.post.filters.visible.items.private'),
+                    value: 'PRIVATE',
+                  },
+                ]"
+              />
+              <CategoryFilterDropdown
+                v-model="selectedCategory"
+                :label="$t('core.post.filters.category.label')"
+              />
+              <TagFilterDropdown
+                v-model="selectedTag"
+                :label="$t('core.post.filters.tag.label')"
+              />
+              <UserFilterDropdown
+                v-model="selectedContributor"
+                :label="$t('core.post.filters.author.label')"
+              />
+              <FilterDropdown
+                v-model="selectedSort"
+                :label="$t('core.common.filters.labels.sort')"
+                :items="[
+                  {
+                    label: t('core.common.filters.item_labels.default'),
+                  },
+                  {
+                    label: t('core.post.filters.sort.items.publish_time_desc'),
+                    value: 'publishTime,desc',
+                  },
+                  {
+                    label: t('core.post.filters.sort.items.publish_time_asc'),
+                    value: 'publishTime,asc',
+                  },
+                  {
+                    label: t('core.post.filters.sort.items.create_time_desc'),
+                    value: 'creationTimestamp,desc',
+                  },
+                  {
+                    label: t('core.post.filters.sort.items.create_time_asc'),
+                    value: 'creationTimestamp,asc',
+                  },
+                ]"
+              />
+              <div class="flex flex-row gap-2">
+                <div
+                  class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+                  @click="refetch()"
+                >
+                  <IconRefreshLine
+                    v-tooltip="$t('core.common.buttons.refresh')"
+                    :class="{ 'animate-spin text-gray-900': isFetching }"
+                    class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                  />
                 </div>
-              </VSpace>
-            </div>
+              </div>
+            </VSpace>
           </div>
         </div>
       </template>
diff --git a/console/src/modules/system/plugins/PluginList.vue b/console/src/modules/system/plugins/PluginList.vue
index adef80182..bed4996ff 100644
--- a/console/src/modules/system/plugins/PluginList.vue
+++ b/console/src/modules/system/plugins/PluginList.vue
@@ -159,11 +159,11 @@ onMounted(() => {
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
           >
             <div
               v-permission="['system:posts:manage']"
-              class="mr-4 hidden items-center sm:flex"
+              class="hidden items-center sm:flex"
             >
               <input
                 v-model="checkedAll"
@@ -206,64 +206,58 @@ onMounted(() => {
                 </VDropdown>
               </VSpace>
             </div>
-            <div class="mt-4 flex sm:mt-0">
-              <VSpace spacing="lg">
-                <FilterCleanButton
-                  v-if="hasFilters"
-                  @click="handleClearFilters"
-                />
-                <FilterDropdown
-                  v-model="selectedEnabledValue"
-                  :label="$t('core.common.filters.labels.status')"
-                  :items="[
-                    {
-                      label: t('core.common.filters.item_labels.all'),
-                    },
-                    {
-                      label: t('core.plugin.filters.status.items.active'),
-                      value: true,
-                    },
-                    {
-                      label: t('core.plugin.filters.status.items.inactive'),
-                      value: false,
-                    },
-                  ]"
-                />
-                <FilterDropdown
-                  v-model="selectedSortValue"
-                  :label="$t('core.common.filters.labels.sort')"
-                  :items="[
-                    {
-                      label: t('core.common.filters.item_labels.default'),
-                    },
-                    {
-                      label: t(
-                        'core.plugin.filters.sort.items.create_time_desc'
-                      ),
-                      value: 'creationTimestamp,desc',
-                    },
-                    {
-                      label: t(
-                        'core.plugin.filters.sort.items.create_time_asc'
-                      ),
-                      value: 'creationTimestamp,asc',
-                    },
-                  ]"
-                />
-                <div class="flex flex-row gap-2">
-                  <div
-                    class="group cursor-pointer rounded p-1 hover:bg-gray-200"
-                    @click="refetch()"
-                  >
-                    <IconRefreshLine
-                      v-tooltip="$t('core.common.buttons.refresh')"
-                      :class="{ 'animate-spin text-gray-900': isFetching }"
-                      class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                    />
-                  </div>
+            <VSpace spacing="lg" class="flex-wrap">
+              <FilterCleanButton
+                v-if="hasFilters"
+                @click="handleClearFilters"
+              />
+              <FilterDropdown
+                v-model="selectedEnabledValue"
+                :label="$t('core.common.filters.labels.status')"
+                :items="[
+                  {
+                    label: t('core.common.filters.item_labels.all'),
+                  },
+                  {
+                    label: t('core.plugin.filters.status.items.active'),
+                    value: true,
+                  },
+                  {
+                    label: t('core.plugin.filters.status.items.inactive'),
+                    value: false,
+                  },
+                ]"
+              />
+              <FilterDropdown
+                v-model="selectedSortValue"
+                :label="$t('core.common.filters.labels.sort')"
+                :items="[
+                  {
+                    label: t('core.common.filters.item_labels.default'),
+                  },
+                  {
+                    label: t('core.plugin.filters.sort.items.create_time_desc'),
+                    value: 'creationTimestamp,desc',
+                  },
+                  {
+                    label: t('core.plugin.filters.sort.items.create_time_asc'),
+                    value: 'creationTimestamp,asc',
+                  },
+                ]"
+              />
+              <div class="flex flex-row gap-2">
+                <div
+                  class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+                  @click="refetch()"
+                >
+                  <IconRefreshLine
+                    v-tooltip="$t('core.common.buttons.refresh')"
+                    :class="{ 'animate-spin text-gray-900': isFetching }"
+                    class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                  />
                 </div>
-              </VSpace>
-            </div>
+              </div>
+            </VSpace>
           </div>
         </div>
       </template>
diff --git a/console/src/modules/system/users/UserList.vue b/console/src/modules/system/users/UserList.vue
index 144661382..9e089d1f9 100644
--- a/console/src/modules/system/users/UserList.vue
+++ b/console/src/modules/system/users/UserList.vue
@@ -291,11 +291,11 @@ onMounted(() => {
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
           >
             <div
               v-permission="['system:users:manage']"
-              class="mr-4 hidden items-center sm:flex"
+              class="hidden items-center sm:flex"
             >
               <input
                 v-model="checkedAll"
@@ -312,63 +312,61 @@ onMounted(() => {
                 </VButton>
               </VSpace>
             </div>
-            <div class="mt-4 flex sm:mt-0">
-              <VSpace spacing="lg">
-                <FilterCleanButton
-                  v-if="hasFilters"
-                  @click="handleClearFilters"
-                />
-                <FilterDropdown
-                  v-model="selectedRoleValue"
-                  :label="$t('core.user.filters.role.label')"
-                  :items="[
-                    {
-                      label: t('core.common.filters.item_labels.all'),
-                    },
-                    ...roles.map((role) => {
-                      return {
-                        label:
-                          role.metadata.annotations?.[
-                            rbacAnnotations.DISPLAY_NAME
-                          ] || role.metadata.name,
-                        value: role.metadata.name,
-                      };
-                    }),
-                  ]"
-                />
-                <FilterDropdown
-                  v-model="selectedSortValue"
-                  :label="$t('core.common.filters.labels.sort')"
-                  :items="[
-                    {
-                      label: t('core.common.filters.item_labels.default'),
-                    },
-                    {
-                      label: t('core.user.filters.sort.items.create_time_desc'),
-                      value: 'creationTimestamp,desc',
-                    },
-                    {
-                      label: t('core.user.filters.sort.items.create_time_asc'),
-                      value: 'creationTimestamp,asc',
-                    },
-                  ]"
-                />
-                <div class="flex flex-row gap-2">
-                  <div
-                    class="group cursor-pointer rounded p-1 hover:bg-gray-200"
-                    @click="refetch()"
-                  >
-                    <IconRefreshLine
-                      v-tooltip="$t('core.common.buttons.refresh')"
-                      :class="{
-                        'animate-spin text-gray-900': isFetching,
-                      }"
-                      class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
-                    />
-                  </div>
+            <VSpace spacing="lg" class="flex-wrap">
+              <FilterCleanButton
+                v-if="hasFilters"
+                @click="handleClearFilters"
+              />
+              <FilterDropdown
+                v-model="selectedRoleValue"
+                :label="$t('core.user.filters.role.label')"
+                :items="[
+                  {
+                    label: t('core.common.filters.item_labels.all'),
+                  },
+                  ...roles.map((role) => {
+                    return {
+                      label:
+                        role.metadata.annotations?.[
+                          rbacAnnotations.DISPLAY_NAME
+                        ] || role.metadata.name,
+                      value: role.metadata.name,
+                    };
+                  }),
+                ]"
+              />
+              <FilterDropdown
+                v-model="selectedSortValue"
+                :label="$t('core.common.filters.labels.sort')"
+                :items="[
+                  {
+                    label: t('core.common.filters.item_labels.default'),
+                  },
+                  {
+                    label: t('core.user.filters.sort.items.create_time_desc'),
+                    value: 'creationTimestamp,desc',
+                  },
+                  {
+                    label: t('core.user.filters.sort.items.create_time_asc'),
+                    value: 'creationTimestamp,asc',
+                  },
+                ]"
+              />
+              <div class="flex flex-row gap-2">
+                <div
+                  class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+                  @click="refetch()"
+                >
+                  <IconRefreshLine
+                    v-tooltip="$t('core.common.buttons.refresh')"
+                    :class="{
+                      'animate-spin text-gray-900': isFetching,
+                    }"
+                    class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+                  />
                 </div>
-              </VSpace>
-            </div>
+              </div>
+            </VSpace>
           </div>
         </div>
       </template>