fix(logs): optimize layout for full height

src/components/ui/Card.tsx

@@ -3,11 +3,12 @@ import type { PropsWithChildren, ReactNode } from 'react';
 interface CardProps {
   title?: ReactNode;
   extra?: ReactNode;
+  className?: string;
 }
 
-export function Card({ title, extra, children }: PropsWithChildren<CardProps>) {
+export function Card({ title, extra, children, className }: PropsWithChildren<CardProps>) {
   return (
-    <div className="card">
+    <div className={className ? `card ${className}` : 'card'}>
       {(title || extra) && (
         <div className="card-header">
           <div className="title">{title}</div>

src/i18n/locales/en.json

@@ -609,6 +609,7 @@
     "load_more_hint": "Scroll up to load more",
     "hidden_lines": "Hidden: {{count}} lines",
     "loaded_lines": "Loaded: {{count}} lines",
+    "filtered_lines": "Filtered: {{count}} lines",
     "hide_management_logs": "Hide {{prefix}} logs",
     "search_placeholder": "Search logs by content or keyword",
     "search_empty_title": "No matching logs found",

src/i18n/locales/zh-CN.json

@@ -609,6 +609,7 @@
     "load_more_hint": "向上滚动加载更多",
     "hidden_lines": "已隐藏 {{count}} 行",
     "loaded_lines": "已载入 {{count}} 行",
+    "filtered_lines": "已过滤 {{count}} 行",
     "hide_management_logs": "屏蔽 {{prefix}} 日志",
     "search_placeholder": "搜索日志内容或关键字",
     "search_empty_title": "未找到匹配的日志",

src/pages/LogsPage.module.scss

@@ -2,6 +2,10 @@
 
 .container {
   width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .pageTitle {
@@ -46,6 +50,16 @@
   display: flex;
   flex-direction: column;
   gap: $spacing-lg;
+  flex: 1;
+  min-height: 0;
+}
+
+.logCard {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .toolbar {
@@ -146,7 +160,8 @@
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: $radius-md;
-  max-height: 620px;
+  flex: 1;
+  min-height: 200px;
   overflow: auto;
   position: relative;
 }

src/pages/LogsPage.tsx

@@ -550,7 +550,7 @@ export function LogsPage() {
   const isSearching = trimmedSearchQuery.length > 0;
   const baseLines = isSearching ? logState.buffer : visibleLines;
 
-  const { filteredLines } = useMemo(() => {
+  const { filteredLines, removedCount } = useMemo(() => {
     let working = baseLines;
     let removed = 0;
 
@@ -649,7 +649,7 @@ export function LogsPage() {
 
       <div className={styles.content}>
         {activeTab === 'logs' && (
-          <Card>
+          <Card className={styles.logCard}>
             {error && <div className="error-box">{error}</div>}
 
             <div className={styles.filters}>
@@ -750,6 +750,11 @@ export function LogsPage() {
                       <span>
                         {t('logs.loaded_lines', { count: parsedVisibleLines.length })}
                       </span>
+                      {removedCount > 0 && (
+                        <span className={styles.loadMoreCount}>
+                          {t('logs.filtered_lines', { count: removedCount })}
+                        </span>
+                      )}
                       <span className={styles.loadMoreCount}>
                         {t('logs.hidden_lines', { count: logState.visibleFrom })}
                       </span>
@@ -800,6 +805,15 @@ export function LogsPage() {
                             </span>
                           )}
 
+                          {line.requestId && (
+                            <span
+                              className={[styles.badge, styles.requestIdBadge].join(' ')}
+                              title={line.requestId}
+                            >
+                              {line.requestId}
+                            </span>
+                          )}
+
                           {typeof line.statusCode === 'number' && (
                             <span
                               className={[
@@ -827,15 +841,6 @@ export function LogsPage() {
                             </span>
                           )}
 
-                          {line.requestId && (
-                            <span
-                              className={[styles.badge, styles.requestIdBadge].join(' ')}
-                              title={line.requestId}
-                            >
-                              {line.requestId}
-                            </span>
-                          )}
-
                           {line.path && (
                             <span className={styles.path} title={line.path}>
                               {line.path}

src/styles/layout.scss

@@ -336,6 +336,8 @@
   display: flex;
   flex-direction: column;
   gap: $spacing-lg;
+  min-height: 0;
+  overflow: hidden;
 
   @media (max-width: $breakpoint-mobile) {
     padding: $spacing-md;