Stabilize usage limit meter columns

This commit is contained in:
murashit 2026-06-04 10:09:02 +09:00
parent 417e7d61d8
commit 383096c059
2 changed files with 12 additions and 3 deletions

View file

@ -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;
}

View file

@ -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 \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
const limitValue = /\.codex-panel__limit-panel-value \{(?<body>[^}]+)\}/.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", () => {