diff --git a/src/main/resources/static/css/stats-layout.css b/src/main/resources/static/css/stats-layout.css new file mode 100644 index 00000000..f3b691f4 --- /dev/null +++ b/src/main/resources/static/css/stats-layout.css @@ -0,0 +1,50 @@ +.tabs { + max-width: 100%; + overflow-x: auto; + scrollbar-width: none; +} + +.tabs::-webkit-scrollbar { + display: none; +} + +.tab-link { + flex: 0 0 auto; + white-space: nowrap; +} + +.health-bar, +.btn-refresh { + flex-shrink: 0; + white-space: nowrap; +} + +.refreshed-at span { + display: inline-block; + white-space: nowrap; +} + +@media (max-width: 820px) { + .page-header { + align-items: stretch; + flex-direction: column; + gap: 12px; + } + + .header-right { + justify-content: flex-start; + flex-wrap: wrap; + gap: 8px 12px; + } +} + +@media (max-width: 680px) { + .tabs { + width: 100%; + } + + .tab-link { + padding: 7px 12px; + font-size: .76rem; + } +} diff --git a/src/main/resources/static/css/stats-period.css b/src/main/resources/static/css/stats-period.css index 6c1a2715..598e3f9e 100644 --- a/src/main/resources/static/css/stats-period.css +++ b/src/main/resources/static/css/stats-period.css @@ -149,35 +149,6 @@ } @media (max-width: 680px) { - .page-header { - align-items: stretch; - flex-direction: column; - gap: 12px; - } - - .header-right { - justify-content: flex-start; - flex-wrap: wrap; - gap: 8px 12px; - } - - .tabs { - width: 100%; - max-width: 100%; - overflow-x: auto; - scrollbar-width: none; - } - - .tabs::-webkit-scrollbar { - display: none; - } - - .tab-link { - flex: 0 0 auto; - padding: 7px 12px; - font-size: .76rem; - } - .period-panel-header { align-items: stretch; flex-direction: column; diff --git a/src/main/resources/templates/stats/ask-chat.html b/src/main/resources/templates/stats/ask-chat.html index 5b4d74a4..86fe7236 100644 --- a/src/main/resources/templates/stats/ask-chat.html +++ b/src/main/resources/templates/stats/ask-chat.html @@ -254,8 +254,6 @@ } @media (max-width: 820px) { body { padding: 20px 14px 40px; } - .page-header { align-items: stretch; flex-direction: column; } - .header-right { flex-wrap: wrap; gap: 8px 12px; } .period-panel-header { align-items: stretch; flex-direction: column; } .chart-grid, .detail-grid { grid-template-columns: 1fr; } } @@ -265,14 +263,14 @@ .summary-value { font-size: 1.4rem; } .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .period-title { font-size: 1.05rem; } - .tab-link { padding: 7px 12px; font-size: .76rem; } } +