feat: fix chart overflow issues by adjusting CSS height strategies and ECharts grid configuration

frontend/src/components/charts/LicenseTrendChart.vue

@@ -159,11 +159,11 @@ const chartOption = computed(() => {
   
   return {
     grid: {
-      left: 60,
-      right: 50,
+      left: '3%',   // percentage so margins scale with container width
+      right: '3%',
       top: 30,
-      bottom: 60,
-      containLabel: false
+      bottom: 30,   // reduced: containLabel handles room for axis labels
+      containLabel: true // axis labels are always contained within the grid boundary
     },
     xAxis: {
       type: 'category',
@@ -216,6 +216,7 @@ const chartOption = computed(() => {
         fontSize: 12
       },
       extraCssText: 'box-shadow: 0px 4px 12px 0px rgba(59, 210, 180, 0.2); backdrop-filter: blur(4px);',
+      appendToBody: true, // mount tooltip DOM on <body> to escape overflow:hidden on card
       formatter: (params: any) => {
         const data = params[0]
         return `${t('chart.licenseTrend.tooltip.licenseCount')}: ${data.value}`
@@ -387,7 +388,7 @@ onMounted(() => {
   border-radius: 0.42vw; /* 8px/1920 = 0.42vw */
   box-shadow: var(--app-shadow);
   overflow: hidden;
-  height: 100%; /* 充满容器高度 */
+  /* Height is driven by the chart canvas below; card grows to fit content */
   display: flex;
   flex-direction: column;
 }
@@ -498,14 +499,15 @@ onMounted(() => {
 
 .chart-container {
   padding: 1.35vw 1.25vw 1.25vw; /* 26px 24px 24px → vw */
-  flex: 1; /* 占据剩余高度 */
+  flex-shrink: 0; /* chart canvas height drives card size — never compress */
   display: flex;
-  min-height: 0; /* 防止flex溢出 */
+  position: relative; /* establish stacking context for chart canvas */
   
   .trend-chart {
     width: 100%;
-    height: 100%; /* 充满容器 */
-    min-height: 12.8vw; /* 最小高度246px/1920 = 12.8vw，确保图表可读性 */
+    height: 18vw;      /* ~346px at 1920px reference width */
+    max-height: 248px; /* keeps total card height ≤ 352px (248 + ~50px padding + ~54px header) */
+    min-height: 200px; /* absolute floor so chart is always readable */
   }
 }
 

frontend/src/views/Dashboard.vue

@@ -237,9 +237,12 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-/* content-container样式 */
+/* content-container styles */
 .content-container {
-  min-height: calc(100vh - 80px);
+  /* Use a definite height so flex children with height:100% can resolve correctly.
+     min-height alone does not propagate to children in CSS. */
+  height: calc(100vh - 80px);
+  min-height: 600px; /* floor so content is never crushed on very small viewports */
   padding: 24px;
   width: 100%;
   margin: 0;
@@ -411,10 +414,9 @@ onMounted(() => {
   min-height: 0; /* 防止flex子元素溢出 */
 }
 
-// 图表区域 - 占据50%高度
+// Chart section: auto-sized by chart card content, never shrinks
 .chart-section {
-  flex: 0.5; /* 50%高度 */
-  min-height: 300px; /* 确保最小高度 */
+  flex-shrink: 0;
   display: flex;
   flex-direction: column;
 }
@@ -427,8 +429,8 @@ onMounted(() => {
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  flex: 0.6; /* 占据60%高度 */
-  min-height: 0; /* 防止flex子元素溢出 */
+  flex: 1; /* fill all remaining space after chart card */
+  min-height: 250px; /* ensure table always has usable space */
 }
 
 .card-header {

frontend/src/views/Login.vue

@@ -35,21 +35,18 @@
         <p class="hero-subtitle">{{ t('login.heroSubtitle') }}</p>
         <div class="hero-stats">
           <div class="stat-item">
-            <span class="stat-label">{{ t('login.stats.totalAuthCodes') }}</span>
             <span class="stat-number">10K+</span>
-            <span class="stat-sublabel">{{ t('login.stats.totalAuthCodesSubLabel') }}</span>
-          </div>
-          <div class="stat-divider"></div>
-          <div class="stat-item">
             <span class="stat-label">{{ t('login.stats.activeLicenses') }}</span>
-            <span class="stat-number">8,234</span>
-            <span class="stat-sublabel">{{ t('login.stats.activeLicensesSubLabel') }}</span>
           </div>
           <div class="stat-divider"></div>
           <div class="stat-item">
-            <span class="stat-label">{{ t('login.stats.systemUptime') }}</span>
             <span class="stat-number">99.9%</span>
-            <span class="stat-sublabel">{{ t('login.stats.systemUptimeSubLabel') }}</span>
+            <span class="stat-label">{{ t('login.stats.uptime') }}</span>
+          </div>
+          <div class="stat-divider"></div>
+          <div class="stat-item">
+            <span class="stat-number">24/7</span>
+            <span class="stat-label">{{ t('login.stats.support') }}</span>
           </div>
         </div>
       </div>