Improve mobile car monitor layout

README.md

@@ -15,6 +15,7 @@ Car는 차량 모뎀/게이트웨이에서 받은 상태를 수집해 DB에 저
 - 허용된 차량 명령 TCP 전송
 - monitor 화면과 AJAX 상태 갱신
 - monitor 화면 WakeLock, 언어, 테마 토글
+- 모바일 폭에 맞춘 사용량/로그 가로 스크롤과 시간 문구 축약
 - 사용량/요금 표시와 보정 metadata
 - 4.95초 UI timeout과 60초 사용량 정산 분리
 - TCP 실패 reason과 마지막 수신 지연 표시
@@ -37,6 +38,8 @@ Car는 차량 모뎀/게이트웨이에서 받은 상태를 수집해 DB에 저
 
 상태 기록 섹션의 경과는 각 로그가 기록된 시각부터 현재까지 흐른 시간입니다. 각 행의 `age_seconds`는 서버 현재시각과 로그 timestamp의 차이로 계산해 내려주며, 화면 갱신마다 상단 조회 주기 경과처럼 계속 증가합니다.
 
+모바일처럼 폭이 좁은 화면에서는 조회 경과와 시동 유지 시간이 한 줄로 유지되도록 초, 필요 시 분 단위를 생략해 표시합니다. 사용량 지표와 상태 기록 테이블은 카드 내부에서 좌우 스크롤되도록 분리해 전체 페이지 레이아웃이 밀리지 않게 합니다.
+
 ## Monitor 화면 제어
 
 헤더 우측 컨트롤은 WakeLock, 언어, 테마 순서입니다. WakeLock은 Screen Wake Lock API를 지원하는 브라우저에서 화면 꺼짐을 방지하며, 활성 상태는 초록색 아이콘 버튼으로 표시합니다. 사용자의 선택은 `localStorage`에 저장하고, 새로고침이나 탭 복귀 후에는 브라우저 정책에 맞춰 다시 획득을 시도합니다.

monitor.php

@@ -773,6 +773,9 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
             transition: all 0.3s ease;
             overflow: hidden; /* Fix for header background corner bleeding */
         }
+        .glass-card > * {
+            min-width: 0;
+        }
 
         /* Headers & Typography */
         .dashboard-header {
@@ -866,7 +869,13 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
         @keyframes spin-slow { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
 
         /* Log Table Styling */
-        .table-container { width: 100%; border-collapse: separate; border-spacing: 0 5px; }
+        .table-scroll {
+            max-height: 400px;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+            scrollbar-gutter: stable;
+        }
+        .table-container { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0 5px; }
         .table-container th {
             font-size: 0.7rem; color: var(--table-head-text); font-weight: 700;
             padding: 0 10px 10px 10px; text-align: center; border: none;
@@ -906,6 +915,13 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
             padding: 3px 10px; border-radius: 6px;
             font-size: 0.75rem; font-weight: 600; min-width: 90px;
         }
+        .duration-line {
+            display: block;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
 
         .detail-text {
             color: var(--text-secondary);
@@ -980,6 +996,10 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
         }
         .usage-main {
             min-width: 0;
+            overflow-x: auto;
+            overflow-y: hidden;
+            -webkit-overflow-scrolling: touch;
+            scrollbar-gutter: stable;
         }
         .usage-meter {
             height: 11px;
@@ -1008,6 +1028,7 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
             display: grid;
             grid-template-columns: repeat(6, minmax(100px, 1fr));
             gap: 0.8rem;
+            min-width: 660px;
         }
         .usage-metric {
             min-width: 0;
@@ -1039,19 +1060,83 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
             .usage-metrics {
                 grid-template-columns: repeat(3, minmax(0, 1fr));
                 gap: 0.55rem;
+                min-width: 0;
             }
         }
         @media (max-width: 575.98px) {
+            .container {
+                max-width: 100%;
+                padding-left: 0.9rem;
+                padding-right: 0.9rem;
+            }
+            .dashboard-header {
+                gap: 0.8rem;
+                align-items: flex-start;
+            }
+            .dashboard-header > .d-flex:last-child {
+                gap: 0.45rem !important;
+                flex: 0 0 auto;
+            }
+            .btn-icon-toggle {
+                width: 36px;
+                height: 36px;
+            }
+            .glass-card.h-100.p-4 {
+                padding: 1rem !important;
+            }
+            .value-text {
+                font-size: 1.55rem;
+            }
+            .icon-box {
+                width: 42px;
+                height: 42px;
+                border-radius: 13px;
+                margin-bottom: 0.85rem;
+            }
             .usage-card {
                 padding: 1rem;
             }
-            .usage-metrics {
+            .usage-head {
-                grid-template-columns: repeat(3, minmax(0, 1fr));
+                gap: 0.75rem;
-                gap: 0.45rem;
             }
+            .usage-stat .d-flex {
+                flex-wrap: nowrap !important;
+            }
+            .usage-main {
+                padding-bottom: 0.25rem;
+            }
+            .usage-metrics {
+                grid-template-columns: repeat(6, minmax(92px, 1fr));
+                gap: 0.45rem;
+                min-width: 600px;
+            }
+            .usage-metric .label-text { font-size: 0.64rem; }
+            .usage-metric .font-mono { font-size: 0.88rem; }
             .usage-detail-line {
                 white-space: normal;
             }
+            .table-scroll {
+                max-height: 52vh;
+            }
+            .table-container {
+                min-width: 660px;
+            }
+            .table-container th {
+                padding-left: 8px;
+                padding-right: 8px;
+            }
+            .table-container td {
+                padding: 9px 8px;
+                font-size: 0.82rem;
+            }
+            .cmd-pill {
+                min-width: 78px;
+                padding-left: 8px;
+                padding-right: 8px;
+            }
+            .detail-text {
+                max-width: 140px;
+            }
         }
     </style>
 </head>
@@ -1110,7 +1195,7 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
                 <div class="d-flex align-items-center gap-2 mb-2">
                     <span id="val-engine" class="value-text text-secondary">OFF</span>
                 </div>
-                <div id="val-state-timer" class="font-mono text-secondary mb-2" style="font-size: 0.85rem;">-</div>
+                <div id="val-state-timer" class="font-mono text-secondary mb-2 duration-line" style="font-size: 0.85rem;">-</div>
             </div>
         </div>
 
@@ -1133,7 +1218,7 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
                     <div class="icon-box c-green"><i class="fas fa-signal"></i></div>
                     <div class="text-end">
                         <div class="label-text mb-0" style="font-size:0.65rem;" data-i18n="age">AGE</div>
-                        <div id="age-seconds" class="font-mono fw-bold text-muted">-</div>
+                        <div id="age-seconds" class="font-mono fw-bold text-muted duration-line">-</div>
                     </div>
                 </div>
                 <div class="label-text mt-1" data-i18n="pollTarget">Poll Target</div>
@@ -1334,7 +1419,7 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
                     <h6 class="mb-0 fw-bold small text-uppercase text-secondary"><i class="fas fa-list-ul me-2"></i><span data-i18n="statusLog">Status Log</span></h6>
                 </div>
                 <div class="p-3 flex-grow-1">
-                    <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
+                    <div class="table-responsive table-scroll">
                         <table class="table-container">
                             <thead>
                                 <tr>
@@ -1514,6 +1599,8 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
     let usageInFlight = false;
     let wakeLockSentinel = null;
     let wakeLockWanted = false;
+    let latestDashboardData = null;
+    let latestDashboardMeta = null;
 
     document.addEventListener('DOMContentLoaded', () => {
         initLanguage();
@@ -1523,6 +1610,7 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
         fetchData();
         refreshTimer = setInterval(fetchData, 1000);
         fetchUsage();
+        window.addEventListener('resize', debounce(updateResponsiveDurations, 150));
     });
 
     document.addEventListener('visibilitychange', () => {
@@ -1567,6 +1655,7 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
             langBtn.setAttribute('aria-label', t('languageTitle'));
         }
         updateWakeLockButton();
+        updateResponsiveDurations();
     }
 
     function initTheme() {
@@ -1786,10 +1875,12 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
         const age = Number(meta.age_seconds ?? 0);
         const isStale = Boolean(meta.stale ?? age > 30);
         const isReceiveBad = age >= 60;
+        latestDashboardData = data;
+        latestDashboardMeta = meta;
         updateLiveBadge(true, isStale);
 
         document.getElementById('last-updated').textContent = data.ts ? String(data.ts).substring(11) : '--:--:--';
-        document.getElementById('age-seconds').textContent = formatAgeUnits(age);
+        document.getElementById('age-seconds').textContent = formatResponsiveDuration(age, 'age');
         document.getElementById('val-poll-interval').textContent = meta.poll_interval ?? '-';
         const freshnessEl = document.getElementById('val-freshness');
         freshnessEl.textContent = isReceiveBad ? t('dataDelayed') : t('targetInterval');
@@ -1828,15 +1919,27 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
             visualHeadlight.classList.remove('on');
         }
 
-        const duration = formatDuration(Number(meta.state_duration || 0));
+        updateEngineDuration(data, meta);
+
+        updateRemote(data);
+        updateDoors(data);
+    }
+
+    function updateResponsiveDurations() {
+        if (!latestDashboardData || !latestDashboardMeta) return;
+
+        document.getElementById('age-seconds').textContent =
+            formatResponsiveDuration(Number(latestDashboardMeta.age_seconds ?? 0), 'age');
+        updateEngineDuration(latestDashboardData, latestDashboardMeta);
+    }
+
+    function updateEngineDuration(data, meta) {
+        const duration = formatResponsiveDuration(Number(meta.state_duration || 0), 'state');
         const isEngineOnForLabel = parseInt(data.engine) === 1;
         const sentenceKey = isEngineOnForLabel ? 'engineStateOnSentence' : 'engineStateOffSentence';
         const sentence = t(sentenceKey).replace('{duration}', `<span class="fw-bold">${duration}</span>`);
 
         document.getElementById('val-state-timer').innerHTML = sentence;
-
-        updateRemote(data);
-        updateDoors(data);
     }
 
     function updateUsage(usage) {
@@ -2011,6 +2114,38 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
         return '+' + Math.floor(sec / 3600) + t('hourShort');
     }
 
+    function compactDurationMode() {
+        const width = window.innerWidth || document.documentElement.clientWidth || 1024;
+        if (width <= 380) return 'tight';
+        if (width <= 575) return 'compact';
+        return 'full';
+    }
+
+    function formatResponsiveDuration(sec, context = 'state') {
+        const mode = compactDurationMode();
+        if (mode === 'full') {
+            return context === 'age' ? formatAgeUnits(sec) : formatDuration(sec);
+        }
+
+        sec = Math.max(0, Number(sec || 0));
+        const d = Math.floor(sec / 86400);
+        const h = Math.floor((sec % 86400) / 3600);
+        const m = Math.floor((sec % 3600) / 60);
+        const s = Math.floor(sec % 60);
+
+        if (mode === 'tight') {
+            if (d > 0) return d + t('dayShort');
+            if (h > 0) return h + t('hourShort');
+            if (m > 0) return m + t('minShort');
+            return s + t('secShort');
+        }
+
+        if (d > 0) return d + t('dayShort') + (h > 0 ? ' ' + h + t('hourShort') : '');
+        if (h > 0) return h + t('hourShort');
+        if (m > 0) return m + t('minShort');
+        return s + t('secShort');
+    }
+
     function formatDuration(sec) {
         sec = Math.max(0, Number(sec || 0));
 
@@ -2060,6 +2195,14 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
         return Math.max(0, Number(sec || 0)) + t('secShort');
     }
 
+    function debounce(fn, wait) {
+        let timer = null;
+        return function (...args) {
+            clearTimeout(timer);
+            timer = setTimeout(() => fn.apply(this, args), wait);
+        };
+    }
+
     function escapeHtml(value) {
         return String(value)
             .replace(/&/g, '&amp;')