소스 수정

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>

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; }