From ad3f996bdbace9be9f9856e6cff9f4b274c76dec Mon Sep 17 00:00:00 2001
From: Jefsky Wong <hwj3344@hotmail.com>
Date: Tue, 16 Jun 2026 08:36:39 +0800
Subject: [PATCH] fix(@vben/common-ui): prevent footer slot from overlapping
 content when Page contains Grid (#8056)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Page component's outer container used min-h-full, which doesn't
provide an explicit height for flex children. Combined with h-full on
the content div, this caused the footer slot to overlap table content
(Grid/vxe-table) because the content area didn't properly account for
footer space in the flex column layout.

Fix:
1. Change outer container from min-h-full to h-full — gives the flex
   container an explicit height so percentage heights resolve correctly.
2. Change content area from static h-full to flex-1 when autoContentHeight
   is false — lets the flex layout naturally distribute remaining space
   between content and footer.

Closes #5494

Co-authored-by: jefsky <jefsky@users.noreply.github.com>
---
 packages/effects/common-ui/src/components/page/page.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/effects/common-ui/src/components/page/page.vue b/packages/effects/common-ui/src/components/page/page.vue
index f5ad4b4e8..a2ffc47aa 100644
--- a/packages/effects/common-ui/src/components/page/page.vue
+++ b/packages/effects/common-ui/src/components/page/page.vue
@@ -56,7 +56,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="relative flex min-h-full flex-col">
+  <div class="relative flex h-full flex-col">
     <div
       v-if="
         description ||
@@ -92,7 +92,7 @@ onMounted(() => {
       </div>
     </div>
 
-    <div :class="cn('h-full p-4', contentClass)" :style="contentStyle">
+    <div :class="cn(autoContentHeight ? 'h-full' : 'flex-1', 'p-4', contentClass)" :style="contentStyle">
       <slot></slot>
     </div>
     <div