From e6370601d41814bdadbf2653c4b7dd67527b75ba Mon Sep 17 00:00:00 2001
From: Hyoseong Jo <coziny@osolit.net>
Date: Sun, 28 Dec 2025 17:56:09 +0900
Subject: [PATCH] =?UTF-8?q?=EC=86=8C=EC=8A=A4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/LocationStatsPortlet.vue | 47 +++++++++++---------
 frontend/index.vue                           |  2 +-
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/frontend/components/LocationStatsPortlet.vue b/frontend/components/LocationStatsPortlet.vue
index da4aefc..38c1b8d 100644
--- a/frontend/components/LocationStatsPortlet.vue
+++ b/frontend/components/LocationStatsPortlet.vue
@@ -70,8 +70,8 @@ function formatBytes(bytes: number): string {
 .location-stats-card {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
-  border-radius: 10px;
-  padding: 10px;
+  border-radius: 8px;
+  padding: 6px;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -80,25 +80,25 @@ function formatBytes(bytes: number): string {
 }
 
 .card-header {
-  margin-bottom: 8px;
-  padding-bottom: 6px;
+  margin-bottom: 4px;
+  padding-bottom: 4px;
   border-bottom: 1px solid var(--border-color);
 }
 
-.card-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }
+.card-title { font-size: 11px; font-weight: 600; color: var(--text-primary); }
 
 .location-list {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 4px;
   overflow-y: auto;
   flex: 1;
 }
 
 .location-item {
   background: var(--bg-tertiary, #f8fafc);
-  border-radius: 8px;
-  padding: 8px 10px;
+  border-radius: 6px;
+  padding: 5px 6px;
   border-left: 3px solid #22c55e;
 }
 
@@ -109,11 +109,11 @@ function formatBytes(bytes: number): string {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 6px;
+  margin-bottom: 3px;
 }
 
 .loc-name {
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 600;
   color: var(--text-primary);
   white-space: nowrap;
@@ -122,15 +122,16 @@ function formatBytes(bytes: number): string {
 }
 
 .loc-servers {
-  font-size: 10px;
+  font-size: 9px;
   color: var(--text-muted);
   flex-shrink: 0;
+  margin-left: 4px;
 }
 
 .loc-stats {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
 }
 
 .stat-temp {
@@ -138,7 +139,7 @@ function formatBytes(bytes: number): string {
 }
 
 .temp-value {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 700;
   color: var(--text-primary);
   font-family: monospace;
@@ -151,34 +152,40 @@ function formatBytes(bytes: number): string {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 1px;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .traffic-row {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 2px;
 }
 
 .traffic-label {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--text-muted);
-  width: 12px;
+  width: 10px;
+  flex-shrink: 0;
 }
 
 .traffic-value {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   font-family: monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .traffic-value.rx { color: #06b6d4; }
 .traffic-value.tx { color: #f59e0b; }
 
 .no-data {
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-muted);
   text-align: center;
-  padding: 16px 0;
+  padding: 12px 0;
 }
 </style>
diff --git a/frontend/index.vue b/frontend/index.vue
index cdf838a..c683f7f 100644
--- a/frontend/index.vue
+++ b/frontend/index.vue
@@ -254,7 +254,7 @@ onUnmounted(() => {
 
 .dashboard-layout { display: flex; gap: 16px; height: 100%; }
 .server-section { flex: 9; min-width: 0; }
-.network-section { flex: 1; min-width: 140px; max-width: 180px; display: flex; flex-direction: column; gap: 10px; }
+.network-section { flex: 1; min-width: 150px; max-width: 200px; display: flex; flex-direction: column; gap: 8px; }
 
 .connection-status { position: fixed; bottom: 16px; right: 16px; padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; font-size: 12px; color: var(--text-muted); }
 .connection-status.connected { color: #16a34a; }