From 1b9c3f377f2a385c37601a8cde10c4187be1fcc4 Mon Sep 17 00:00:00 2001
From: seo <seo@chaegeon.com>
Date: Fri, 26 Jun 2026 01:43:51 +0900
Subject: [PATCH] Evenly space usage metrics

---
 monitor.php | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/monitor.php b/monitor.php
index 91e20d5..99d54ee 100644
--- a/monitor.php
+++ b/monitor.php
@@ -1027,24 +1027,21 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
             white-space: nowrap;
         }
         .usage-metrics {
-            display: grid;
-            grid-template-columns: repeat(6, minmax(100px, 1fr));
-            gap: 0.8rem;
+            display: flex;
+            justify-content: space-between;
+            gap: 1rem;
             min-width: 660px;
-            align-items: start;
+            align-items: flex-start;
         }
         .usage-metric {
-            min-width: 0;
+            flex: 0 0 auto;
             text-align: center;
-            justify-self: center;
         }
         .usage-metric:first-child {
             text-align: left;
-            justify-self: start;
         }
         .usage-metric:last-child {
             text-align: right;
-            justify-self: end;
         }
         .usage-metric .label-text {
             font-size: 0.7rem;
@@ -1071,7 +1068,6 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
                 grid-template-columns: 1fr;
             }
             .usage-metrics {
-                grid-template-columns: repeat(3, minmax(0, 1fr));
                 gap: 0.55rem;
                 min-width: 0;
             }
@@ -1119,8 +1115,7 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
                 padding-bottom: 0.25rem;
             }
             .usage-metrics {
-                grid-template-columns: repeat(6, minmax(92px, 1fr));
-                gap: 0.45rem;
+                gap: 0.8rem;
                 min-width: 600px;
             }
             .usage-metric .label-text { font-size: 0.64rem; }