fix(web-ui): align usage today to trailing edge and stop config tab overflow on mobile

- order sessionUsageDaily ascending so the last row is today
- auto-scroll the active day label to the container trailing edge on range switch, initial load, and selection
- scroll session usage day into view with context-aware alignment (end for today reset, nearest for mid-range selection)
- make mobile config segmented control scroll horizontally instead of overflowing the last segment

Author: ymkiux

tests/unit/session-usage.test.mjs

@@ -151,3 +151,28 @@ test('buildUsageHourlyHeatmap returns empty grid for no sessions', () => {
     assert.strictEqual(result.grid[0].length, 24);
     assert.strictEqual(result.maxSessionCount, 1);
 });
+
+test('sessionUsageDaily orders days ascending so the last row is today', async () => {
+    const computedModule = await import(pathToFileURL(path.join(__dirname, '..', '..', 'web-ui', 'modules', 'app.computed.session.mjs')));
+    const computed = computedModule.createSessionComputed();
+    const now = Date.UTC(2026, 3, 10, 12, 0, 0);
+    const sessions = [
+        { source: 'codex', updatedAt: '2026-04-10T08:00:00.000Z', messageCount: 5, totalTokens: 120, contextWindow: 1000, cwd: '/a' },
+        { source: 'claude', updatedAt: '2026-04-09T08:00:00.000Z', messageCount: 7, totalTokens: 230, contextWindow: 1000, cwd: '/a' },
+        { source: 'codex', updatedAt: '2026-04-04T08:00:00.000Z', messageCount: 3, totalTokens: 90, contextWindow: 1000, cwd: '/b' }
+    ];
+    const charts = buildUsageChartGroups(sessions, { range: '7d', now });
+    const vm = {
+        sessionUsageCharts: charts,
+        sessionsUsageList: sessions,
+        sessionsUsageTimeRange: '7d',
+        sessionsUsageCompareEnabled: false
+    };
+    const daily = computed.sessionUsageDaily.call(vm);
+    assert.ok(Array.isArray(daily.rows) && daily.rows.length > 0, 'sessionUsageDaily should emit rows');
+    for (let i = 1; i < daily.rows.length; i += 1) {
+        assert.ok(daily.rows[i - 1].key <= daily.rows[i].key,
+            `rows should be ascending by dayKey (got ${daily.rows[i - 1].key} before ${daily.rows[i].key})`);
+    }
+    assert.strictEqual(daily.rows[daily.rows.length - 1].key, '2026-04-10', 'last row should be today');
+});

tests/unit/web-ui-behavior-parity.test.mjs

@@ -729,7 +729,8 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'applyOpencodeSelection',
         'selectProjectClaudeMdPath',
         'setProjectClaudeMdPathManual',
-        'loadProjectPathOptions'
+        'loadProjectPathOptions',
+        'scrollSessionsUsageDayIntoView'
     ];
     allowedExtraCurrentMethodKeys.push(
         'normalizePackageVersion',

web-ui/modules/app.computed.session.mjs

@@ -773,7 +773,7 @@ export function createSessionComputed() {
             const rows = currentKeys
                 .map((key) => byDay.get(key))
                 .filter(Boolean)
-                .sort((a, b) => b.key.localeCompare(a.key, 'en-US'));
+                .sort((a, b) => a.key.localeCompare(b.key, 'en-US'));
             const rowsWithCompare = rows.map((row) => {
                 if (!compareEnabled) {
                     return { ...row, compareEnabled: false, prevKey: '', prevTokenTotal: 0 };

web-ui/modules/app.methods.session-browser.mjs

@@ -783,6 +783,7 @@ export function createSessionBrowserMethods(options = {}) {
                 this.sessionsUsageCompareEnabled = false;
             }
             void this.loadSessionsUsage({ range });
+            this.scrollSessionsUsageDayIntoView({ behavior: 'auto' });
         },
 
         toggleSessionsUsageCompare() {
@@ -801,12 +802,29 @@ export function createSessionBrowserMethods(options = {}) {
         selectSessionsUsageDay(dayKey) {
             const normalized = typeof dayKey === 'string' ? dayKey.trim() : '';
             this.sessionsUsageSelectedDayKey = normalized;
+            this.scrollSessionsUsageDayIntoView({ behavior: 'smooth', align: 'nearest' });
         },
 
         clearSessionsUsageDay() {
             this.sessionsUsageSelectedDayKey = '';
         },
 
+        scrollSessionsUsageDayIntoView(options = {}) {
+            if (typeof document === 'undefined' || !document) return;
+            const behavior = options.behavior === 'smooth' ? 'smooth' : 'auto';
+            const inline = options.align === 'nearest' ? 'nearest' : 'end';
+            const scrollFn = () => {
+                const node = document.querySelector('.usage-wave-label.active');
+                if (!node || typeof node.scrollIntoView !== 'function') return;
+                node.scrollIntoView({ inline, block: 'nearest', behavior });
+            };
+            if (typeof this.$nextTick === 'function') {
+                this.$nextTick(scrollFn);
+            } else {
+                scrollFn();
+            }
+        },
+
         async loadSessionsUsage(options = {}) {
             if (this.sessionsUsageLoading) return;
             const normalizedRange = typeof options.range === 'string'
@@ -855,7 +873,9 @@ export function createSessionBrowserMethods(options = {}) {
                     this.sessionsUsageLoadedLimit = limit;
                     this.sessionsUsageLastLoadedRange = range;
                     if (!this.sessionsUsageSelectedDayKey && Array.isArray(this.sessionUsageDailyTableRows) && this.sessionUsageDailyTableRows.length > 0) {
-                        this.sessionsUsageSelectedDayKey = this.sessionUsageDailyTableRows[0].key;
+                        const dayKeys = this.sessionUsageDailyTableRows.map((row) => row.key).filter(Boolean).sort((a, b) => b.localeCompare(a, 'en-US'));
+                        this.sessionsUsageSelectedDayKey = dayKeys[0] || this.sessionUsageDailyTableRows[this.sessionUsageDailyTableRows.length - 1].key;
+                        this.scrollSessionsUsageDayIntoView({ behavior: 'auto' });
                     }
                 }
             }

web-ui/styles/responsive.css

@@ -186,6 +186,24 @@ textarea:focus-visible {
 
     .mode-cards > .segmented-control {
         flex-direction: row;
+        flex-wrap: nowrap;
+        max-width: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        -webkit-overflow-scrolling: touch;
+        scroll-snap-type: x proximity;
+    }
+
+    .mode-cards > .segmented-control::-webkit-scrollbar {
+        display: none;
+    }
+
+    .mode-cards > .segmented-control > .segment {
+        flex: 0 0 auto;
+        min-width: 0;
+        white-space: nowrap;
+        scroll-snap-align: start;
     }
 
     .prompts-editor-toolbar {

web-ui/styles/sessions-usage.css

@@ -342,12 +342,26 @@
 
 .usage-wave-labels {
     display: flex;
-    justify-content: space-between;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
     margin-top: 12px;
     padding: 0 8px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x proximity;
+}
+
+.usage-wave-labels::-webkit-scrollbar {
+    display: none;
 }
 
 .usage-wave-label {
+    flex: 0 0 auto;
+    min-width: 0;
+    white-space: nowrap;
+    scroll-snap-align: start;
     font-size: 11px;
     color: var(--color-text-muted);
     cursor: pointer;
@@ -372,6 +386,11 @@
     color: var(--color-brand);
     font-weight: 600;
     background: linear-gradient(135deg, rgba(200, 121, 99, 0.12), rgba(200, 121, 99, 0.06));
+    scroll-snap-align: center;
+}
+
+.usage-wave-label:last-child {
+    scroll-snap-align: end;
 }
 
 /* ---- 日期详情 ---- */