From ba23e6c07bcaa6059655f6e4b63e7d24cb3232f1 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sat, 20 Sep 2025 23:35:17 +0800
Subject: [PATCH] Improve flex layout for category and menu list items (#7760)

---
 .../posts/categories/components/CategoryListItem.vue        | 4 ++--
 ui/console-src/modules/interface/menus/Menus.vue            | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue b/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue
index d282c171c..79d759c6a 100644
--- a/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue
+++ b/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue
@@ -86,7 +86,7 @@ const handleOpenCreateByParentModal = () => {
   <div
     class="group relative flex w-full items-center justify-between px-4 py-3 hover:bg-gray-50"
   >
-    <div>
+    <div class="min-w-0 flex-1 shrink">
       <div
         v-permission="['system:posts:manage']"
         class="drag-element absolute inset-y-0 left-0 hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
@@ -110,7 +110,7 @@ const handleOpenCreateByParentModal = () => {
         </a>
       </div>
     </div>
-    <div class="flex items-center gap-6">
+    <div class="flex flex-none items-center gap-6">
       <VStatusDot
         v-if="categoryTreeNode.metadata.deletionTimestamp"
         v-tooltip="$t('core.common.status.deleting')"
diff --git a/ui/console-src/modules/interface/menus/Menus.vue b/ui/console-src/modules/interface/menus/Menus.vue
index ec5cf2a49..d869c8aa5 100644
--- a/ui/console-src/modules/interface/menus/Menus.vue
+++ b/ui/console-src/modules/interface/menus/Menus.vue
@@ -252,7 +252,7 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
       <div class="w-96 flex-none">
         <MenuList v-model:selected-menu="selectedMenu" />
       </div>
-      <div class="flex-1">
+      <div class="min-w-0 flex-1 shrink">
         <VCard :body-class="['!p-0']">
           <template #header>
             <div class="block w-full bg-gray-50 px-4 py-3">
@@ -319,7 +319,7 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
                 <div
                   class="group relative flex w-full items-center justify-between px-4 py-3 hover:bg-gray-50"
                 >
-                  <div>
+                  <div class="min-w-0 flex-1 shrink">
                     <div
                       v-permission="['system:menus:manage']"
                       class="drag-element absolute inset-y-0 left-0 hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
@@ -348,7 +348,7 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
                       </a>
                     </div>
                   </div>
-                  <div class="flex items-center gap-6">
+                  <div class="flex flex-none items-center gap-6">
                     <VStatusDot
                       v-if="node.metadata.deletionTimestamp"
                       v-tooltip="$t('core.common.status.deleting')"