2bac5d06fe
Previously the mobile terminal header used flex-wrap to stack tabs and the action cluster on separate rows. The actions now stay pinned to the right edge of the header row while the tab bar flexes to fill remaining width and remains horizontally scrollable. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
|
import { loadAllAppCss } from "../test/cssFixture";
|
|
|
|
const css = loadAllAppCss();
|
|
const terminalSectionStart = css.indexOf("Terminal Modal Mobile Responsive");
|
|
const terminalMobileSection =
|
|
terminalSectionStart >= 0 ? css.slice(terminalSectionStart) : "";
|
|
|
|
function findRuleBody(selector: RegExp): string {
|
|
const match = terminalMobileSection.match(
|
|
new RegExp(selector.source + /\s*\{([^}]*)\}/.source),
|
|
);
|
|
return match?.[1] ?? "";
|
|
}
|
|
|
|
describe("terminal mobile header row CSS contract", () => {
|
|
it("keeps the mobile terminal header on one row", () => {
|
|
const ruleBody = findRuleBody(/\.terminal-header/);
|
|
|
|
expect(ruleBody).toContain("flex-wrap: nowrap");
|
|
expect(ruleBody).toContain("overflow: hidden");
|
|
});
|
|
|
|
it("keeps tabs flexible instead of forcing them onto a full-width row", () => {
|
|
const ruleBody = findRuleBody(/\.terminal-tabs/);
|
|
|
|
expect(ruleBody).toContain("flex: 1 1 auto");
|
|
expect(ruleBody).toContain("min-width: 0");
|
|
expect(ruleBody).not.toContain("flex: 1 1 100%");
|
|
expect(ruleBody).not.toContain("min-width: 100%");
|
|
});
|
|
|
|
it("keeps the action cluster on the same row without a second-row divider", () => {
|
|
const ruleBody = findRuleBody(/\.terminal-actions/);
|
|
|
|
expect(ruleBody).toContain("flex: 0 0 auto");
|
|
expect(ruleBody).toContain("border-top: none");
|
|
expect(ruleBody).not.toContain("flex: 1 1 100%");
|
|
});
|
|
|
|
it("defines dedicated spacing between the clear and shortcuts buttons", () => {
|
|
const ruleBody = css.match(/\.terminal-clear-btn--shortcut\s*\{([^}]*)\}/)?.[1] ?? "";
|
|
|
|
expect(ruleBody).toContain("margin-left: var(--space-xs)");
|
|
});
|
|
});
|