arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Fix css not wired in clients

Browse source
This commit is contained in:
Arthur Belleville 2026-04-18 13:05:21 +02:00
parent cc37bf2a78
commit 68ad61b5a9
No known key found for this signature in database
4 changed files with 22 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/clients/src/components/ClientLayout.test.tsx
View file

@ -5,7 +5,7 @@ import { renderWithProviders } from "../test/testHelpers";
import { ClientLayout } from "./ClientLayout";
describe("ClientLayout", () => {
it("uses the main app style header shell and centered content container", () => {
it("uses the main app style header shell and scrolling main viewport", () => {
const { container } = renderWithProviders(<ClientLayout />);
const header = container.querySelector("header");
@ -18,9 +18,17 @@ describe("ClientLayout", () => {
expect(headerInner).toHaveClass("mx-auto");
const main = container.querySelector("main");
expect(main).toHaveClass("w-full");
expect(main).toHaveClass("max-w-7xl");
expect(main).toHaveClass("mx-auto");
expect(main).toHaveClass("flex-1");
expect(main).toHaveClass("overflow-auto");
expect(main).not.toHaveClass("max-w-7xl");
expect(main).not.toHaveClass("mx-auto");
const contentWrapper = main?.firstElementChild;
expect(contentWrapper).toHaveClass("mx-auto");
expect(contentWrapper).toHaveClass("w-full");
expect(contentWrapper).toHaveClass("max-w-7xl");
expect(contentWrapper).toHaveClass("px-4");
expect(contentWrapper).toHaveClass("sm:px-6");
});
it("redirects unauthenticated client routes to the login page", async () => {

8
apps/clients/src/components/ClientLayout.tsx
View file

@ -24,7 +24,7 @@ export function ClientLayout() {
};
return (
<div className="flex min-h-screen flex-col bg-background">
<div className="flex h-screen flex-col overflow-hidden bg-background">
<header className="h-[75px] shrink-0 border-b border-[#EAECF0] bg-navbar-background dark:border-gray-700">
<div className="mx-auto flex h-full w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6">
<span className="text-lg font-semibold text-foreground">Xtablo</span>
@ -42,8 +42,10 @@ export function ClientLayout() {
</div>
</header>
<main className="mx-auto w-full max-w-7xl flex-1 px-4 py-6 sm:px-6">
<Outlet />
<main className="flex-1 overflow-auto">
<div className="mx-auto w-full max-w-7xl px-4 sm:px-6">
<Outlet />
</div>
</main>
</div>
);

2
apps/clients/src/main.css
View file

@ -2,6 +2,8 @@
@import "tw-animate-css";
@source "../../../packages/chat-ui/src/**/*.{ts,tsx}";
@source "../../../packages/tablo-views/src/**/*.{ts,tsx}";
@source "../../../packages/auth-ui/src/**/*.{ts,tsx}";
@custom-variant dark (&:is(.dark *));

4
apps/clients/src/mainCss.test.ts
View file

@ -5,8 +5,10 @@ import { describe, expect, it } from "vitest";
const mainCss = readFileSync(resolve(process.cwd(), "src/main.css"), "utf8");
describe("clients main.css", () => {
it("keeps the chat source and theme tokens aligned with the main app", () => {
it("keeps shared package sources and theme tokens aligned with the main app", () => {
expect(mainCss).toContain('@source "../../../packages/chat-ui/src/**/*.{ts,tsx}";');
expect(mainCss).toContain('@source "../../../packages/tablo-views/src/**/*.{ts,tsx}";');
expect(mainCss).toContain('@source "../../../packages/auth-ui/src/**/*.{ts,tsx}";');
expect(mainCss).toContain("--navbar-background: rgb(249, 250, 251);");
expect(mainCss).toContain("--color-navbar-background: var(--navbar-background);");
expect(mainCss).toContain("--str-chat__own-message-bubble-color: #804eec;");