From 383096c059b06aced8eea0dc422bc8d1840b5ca8 Mon Sep 17 00:00:00 2001 From: murashit Date: Thu, 4 Jun 2026 10:09:02 +0900 Subject: [PATCH] Stabilize usage limit meter columns --- src/styles/21-chat-status-diagnostics.css | 5 ++--- tests/styles.test.ts | 10 ++++++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/styles/21-chat-status-diagnostics.css b/src/styles/21-chat-status-diagnostics.css index 15c04121..d6ca9e97 100644 --- a/src/styles/21-chat-status-diagnostics.css +++ b/src/styles/21-chat-status-diagnostics.css @@ -125,8 +125,8 @@ .codex-panel__limit-panel-row { display: grid; - grid-template-columns: 2.5em 4ch minmax(64px, 1fr) 9.5em; - gap: var(--codex-panel-control-gap); + grid-template-columns: 2ch 4ch minmax(64px, 1fr) max-content; + gap: var(--codex-panel-control-gap) var(--codex-panel-item-gap); align-items: center; padding: var(--codex-panel-control-gap) var(--codex-panel-section-gap); } @@ -143,7 +143,6 @@ } .codex-panel__limit-panel-value { - text-align: right; font-variant-numeric: tabular-nums; } diff --git a/tests/styles.test.ts b/tests/styles.test.ts index 265e769c..1b57bfa5 100644 --- a/tests/styles.test.ts +++ b/tests/styles.test.ts @@ -129,6 +129,16 @@ describe("chat toolbar CSS", () => { expect(threadsRenameInput).toContain("flex: 1 1 auto"); expect(threadsRenameInput).not.toContain("appearance: none"); }); + + it("keeps usage limit meter columns aligned across percent widths", () => { + const limitRow = /\.codex-panel__limit-panel-row \{(?[^}]+)\}/.exec(styles)?.groups?.["body"] ?? ""; + const limitValue = /\.codex-panel__limit-panel-value \{(?[^}]+)\}/.exec(styles)?.groups?.["body"] ?? ""; + + expect(limitRow).toContain("grid-template-columns: 2ch 4ch minmax(64px, 1fr) max-content"); + expect(limitRow).toContain("gap: var(--codex-panel-control-gap) var(--codex-panel-item-gap)"); + expect(limitValue).toContain("font-variant-numeric: tabular-nums"); + expect(limitValue).not.toContain("text-align: right"); + }); }); describe("chat message CSS", () => {