import { readFileSync } from "node:fs";
import { describe, expect, it } from "vitest";
const css = readFileSync("dashboard/src/styles.css", "utf8");
function cssRule(selector: string): string {
const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const match = new RegExp(`${escaped}\\s*\\{(?<body>[^}]*)\\}`).exec(css);
return match?.groups?.body ?? "";
}
describe("dashboard sidebar new chat button layout", () => {
it("keeps localized labels on one line in the compact desktop sidebar", () => {
expect(cssRule(".sidebar")).toContain("container: sidebar / inline-size");
expect(cssRule(".side-head .new-btn")).toContain("flex-wrap: nowrap");
expect(cssRule(".side-head .new-btn")).toContain("min-width: 0");
expect(cssRule(".side-head .new-btn svg")).toContain("flex: 0 0 auto");
expect(cssRule(".side-head .new-btn > span:not(.shortcut)")).toContain("white-space: nowrap");
expect(cssRule(".side-head .new-btn > span:not(.shortcut)")).toContain(
"text-overflow: ellipsis",
);
expect(cssRule(".side-head .new-btn .shortcut")).toContain("flex: 0 0 auto");
expect(cssRule(".side-head .new-btn .shortcut")).toContain("display: none");
expect(css).toContain("@container sidebar (min-width: 191px)");
expect(css).toContain("display: inline-flex");
expect(css).toContain("display: none");
expect(cssRule(".side-head .icon-btn")).toContain("flex: 0 0 auto");
});
});