From fc08a5d36456f7685ad04e6a6a2c133cb87f15dd Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Mon, 16 Mar 2026 00:19:29 +0800
Subject: [PATCH] fix(ui): replace hardcoded height calc with flex-1 to
 eliminate bottom blank area

All content panels used h-[calc(100vh-8rem)] which didn't match the
actual available space (CONTENT_TOP_OFFSET is 92px on Mac, 64px on
Win/Linux, not 128px), causing a visible gap at the bottom.

Replace with flex-1 min-h-0 to let panels fill the remaining space
after <main> and any sibling elements (e.g. OpenClaw health banner).
---
 src/App.tsx                                    | 2 +-
 src/components/agents/AgentsPanel.tsx          | 2 +-
 src/components/mcp/UnifiedMcpPanel.tsx         | 2 +-
 src/components/prompts/PromptPanel.tsx         | 2 +-
 src/components/sessions/SessionManagerPage.tsx | 2 +-
 src/components/skills/SkillsPage.tsx           | 2 +-
 src/components/skills/UnifiedSkillsPanel.tsx   | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d4436da04..5ee35ddc5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -752,7 +752,7 @@ function App() {
           return <AgentsDefaultsPanel />;
         default:
           return (
-            <div className="px-6 flex flex-col h-[calc(100vh-8rem)] overflow-hidden">
+            <div className="px-6 flex flex-col flex-1 min-h-0 overflow-hidden">
               <div className="flex-1 overflow-y-auto overflow-x-hidden pb-12 px-1">
                 <AnimatePresence mode="wait">
                   <motion.div
diff --git a/src/components/agents/AgentsPanel.tsx b/src/components/agents/AgentsPanel.tsx
index 8cf4e41ae..7a0f61c9d 100644
--- a/src/components/agents/AgentsPanel.tsx
+++ b/src/components/agents/AgentsPanel.tsx
@@ -6,7 +6,7 @@ interface AgentsPanelProps {
 
 export function AgentsPanel({}: AgentsPanelProps) {
   return (
-    <div className="px-6 flex flex-col h-[calc(100vh-8rem)]">
+    <div className="px-6 flex flex-col flex-1 min-h-0">
       <div className="flex-1 glass-card rounded-xl p-8 flex flex-col items-center justify-center text-center space-y-4">
         <div className="w-20 h-20 rounded-full bg-white/5 flex items-center justify-center mb-4 animate-pulse-slow">
           <Bot className="w-10 h-10 text-muted-foreground" />
diff --git a/src/components/mcp/UnifiedMcpPanel.tsx b/src/components/mcp/UnifiedMcpPanel.tsx
index 9694c551e..761ddcd65 100644
--- a/src/components/mcp/UnifiedMcpPanel.tsx
+++ b/src/components/mcp/UnifiedMcpPanel.tsx
@@ -132,7 +132,7 @@ const UnifiedMcpPanel = React.forwardRef<
   };
 
   return (
-    <div className="px-6 flex flex-col h-[calc(100vh-8rem)] overflow-hidden">
+    <div className="px-6 flex flex-col flex-1 min-h-0 overflow-hidden">
       <AppCountBar
         totalLabel={t("mcp.serverCount", { count: serverEntries.length })}
         counts={enabledCounts}
diff --git a/src/components/prompts/PromptPanel.tsx b/src/components/prompts/PromptPanel.tsx
index aaaf67316..77e4edb03 100644
--- a/src/components/prompts/PromptPanel.tsx
+++ b/src/components/prompts/PromptPanel.tsx
@@ -96,7 +96,7 @@ const PromptPanel = React.forwardRef<PromptPanelHandle, PromptPanelProps>(
     const enabledPrompt = promptEntries.find(([_, p]) => p.enabled);
 
     return (
-      <div className="flex flex-col h-[calc(100vh-8rem)] px-6">
+      <div className="flex flex-col flex-1 min-h-0 px-6">
         <div className="flex-shrink-0 py-4 glass rounded-xl border border-white/10 mb-4 px-6">
           <div className="text-sm text-muted-foreground">
             {t("prompts.count", { count: promptEntries.length })} ·{" "}
diff --git a/src/components/sessions/SessionManagerPage.tsx b/src/components/sessions/SessionManagerPage.tsx
index 296caf968..99811bc81 100644
--- a/src/components/sessions/SessionManagerPage.tsx
+++ b/src/components/sessions/SessionManagerPage.tsx
@@ -208,7 +208,7 @@ export function SessionManagerPage({ appId }: { appId: string }) {
 
   return (
     <TooltipProvider>
-      <div className="mx-auto px-4 sm:px-6 flex flex-col h-[calc(100vh-8rem)]">
+      <div className="mx-auto px-4 sm:px-6 flex flex-col flex-1 min-h-0">
         <div className="flex-1 overflow-hidden flex flex-col gap-4">
           {/* 主内容区域 - 左右分栏 */}
           <div className="flex-1 overflow-hidden grid gap-4 md:grid-cols-[320px_1fr]">
diff --git a/src/components/skills/SkillsPage.tsx b/src/components/skills/SkillsPage.tsx
index 0bdcd3b4c..ba09c835b 100644
--- a/src/components/skills/SkillsPage.tsx
+++ b/src/components/skills/SkillsPage.tsx
@@ -233,7 +233,7 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
     }, [skills, searchQuery, filterRepo, filterStatus]);
 
     return (
-      <div className="px-6 flex flex-col h-[calc(100vh-8rem)] overflow-hidden bg-background/50">
+      <div className="px-6 flex flex-col flex-1 min-h-0 overflow-hidden bg-background/50">
         {/* 技能网格（可滚动详情区域） */}
         <div className="flex-1 overflow-y-auto overflow-x-hidden animate-fade-in">
           <div className="py-4">
diff --git a/src/components/skills/UnifiedSkillsPanel.tsx b/src/components/skills/UnifiedSkillsPanel.tsx
index 0836bbb40..ca5c719e1 100644
--- a/src/components/skills/UnifiedSkillsPanel.tsx
+++ b/src/components/skills/UnifiedSkillsPanel.tsx
@@ -250,7 +250,7 @@ const UnifiedSkillsPanel = React.forwardRef<
   }));
 
   return (
-    <div className="px-6 flex flex-col h-[calc(100vh-8rem)] overflow-hidden">
+    <div className="px-6 flex flex-col flex-1 min-h-0 overflow-hidden">
       <AppCountBar
         totalLabel={t("skills.installed", { count: skills?.length || 0 })}
         counts={enabledCounts}