Perf: Fit SummeryCard style

src/components/Cards/SummaryCard/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="summary-header">
+      <el-tooltip :content="title" placement="top" :open-delay="500">
         <span class="title">{{ title }}</span>
+      </el-tooltip>
     </div>
     <slot>
       <h3 class="no-margins ">
@@ -78,6 +80,10 @@ export default {
 <style lang="scss" scoped>
 .summary-header {
   //color: var(--color-icon-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
 
   .title {
     font-style: normal;

src/views/dashboard/Pam/SummaryChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="summary-card">
+  <div class="card">
     <div class="title-section">
       <Title :config="config" />
     </div>
@@ -21,10 +21,12 @@
           :key="item.key"
           class="metric-item"
         >
+          <div class="metric-content">
+            <span class="metric-label">{{ $tc(item.label) }}</span>
             <span class="metric-value" :class="{'increase': config[item.key] > 0}">
               {{ config[item.key] }}
             </span>
-          <span class="metric-label">{{ $tc(item.label) }}</span>
+          </div>
         </div>
       </div>
     </div>
@@ -69,47 +71,50 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.summary-card {
+.card {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1.25rem;
   width: 100%;
+  height: 100%;
   background-color: #FFF;
+  overflow: hidden;
 
   .title-section {
+    flex-shrink: 0;
     .title {
-      font-size: 1.125rem;
+      font-size: 1rem;
       font-weight: 600;
       color: var(--color-text-primary);
-      letter-spacing: -0.01em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 
   .content {
     display: flex;
     flex-direction: column;
-    flex-wrap: wrap;
+    flex: 1;
-    gap: 2rem;
+    min-height: 0;
+    gap: 1.5rem;
 
     .info-box {
       display: flex;
+      flex: 3;
+      justify-content: center;
       flex-direction: column;
-      gap: 0.5rem;
+      gap: 0.375rem;
-      flex: 1;
-      min-width: 160px;
-      padding: 1rem 0;
 
       .total-number {
-        font-size: 2.25rem;
+        font-size: 2rem;
         font-weight: 700;
         color: var(--color-text-primary);
-        line-height: 1;
+        line-height: 1.2;
-        letter-spacing: -0.02em;
 
         a {
           color: inherit;
           text-decoration: none;
-          transition: color 0.2s ease;
           &:hover { color: var(--color-primary); }
         }
       }
@@ -117,85 +122,91 @@ export default {
       .sub-title {
         font-size: 0.875rem;
         color: var(--color-icon-primary);
-        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
 
     .metrics-section {
-      display: flex;
+      flex: 1;
-      justify-content: space-between;
+      min-height: 0;
-      flex-wrap: nowrap;
+      display: grid;
-      gap: 0.75rem;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 1rem;
+      align-content: flex-end;
 
       .metric-item {
-        min-width: 120px;
+        min-width: 0;
-        padding: 0.75rem 0;
+        padding: 0.5rem 0;
-        border-radius: 8px;
-        display: flex;
-        flex-direction: column;
-        gap: 0.375rem;
         transition: all 0.2s ease;
+        cursor: pointer;
 
         &:hover {
+          background-color: var(--color-neutral-muted);
           transform: translateY(-2px);
         }
 
+        .metric-content {
+          display: flex;
+          flex-direction: column;
+          gap: 0.25rem;
+
+          .metric-label {
+            font-size: 0.75rem;
+            color: var(--color-icon-primary);
+            text-transform: uppercase;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
           .metric-value {
-          font-size: 1.25rem;
+            font-size: 1.125rem;
             font-weight: 600;
             color: var(--color-text-primary);
-          letter-spacing: -0.01em;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
 
             &.increase {
               color: var(--color-primary);
             }
           }
-
-        .metric-label {
-          font-size: 0.75rem;
-          font-weight: 500;
-          color: var(--color-icon-primary);
-          text-transform: uppercase;
-          letter-spacing: 0.02em;
         }
       }
     }
   }
 
   @media (max-width: 768px) {
-    padding: 1.25rem;
+    .content {
       gap: 1.25rem;
 
-    .content {
-      gap: 1rem;
-
-      .info-box {
-        width: 100%;
-        padding: 0.875rem 0;
-
-        .total-number {
-          font-size: 2rem;
-        }
-      }
-
       .metrics-section {
-        width: 100%;
+        grid-template-columns: repeat(3, 1fr);
-        justify-content: space-between;
-
-        .metric-item {
-          flex: 1;
-          min-width: calc(33.333% - 0.5rem);
-          max-width: calc(50% - 0.5rem);
-        }
       }
     }
   }
 
   @media (max-width: 480px) {
-    padding: 1rem;
+    .content {
+      .metrics-section {
+        grid-template-columns: repeat(2, 1fr);
 
-    .metrics-section .metric-item {
+        .metric-item {
-      min-width: calc(50% - 0.375rem);
+          padding: 0.375rem 0.5rem;
+
+          &:hover {
+            transform: translateY(-1px);
+          }
+
+          .metric-content {
+            .metric-value {
+              font-size: 1rem;
+            }
+          }
+        }
+      }
     }
   }
 }

src/views/dashboard/Pam/index.vue

@@ -85,6 +85,11 @@ export default {
     .right-column {
       max-height: 286px;
       height: 286px;
+
+      ::v-deep .el-row,
+      ::v-deep .el-col {
+        height: 100%;
+      }
     }
   }