diff --git a/ui/src/components/contextual-sidebar-styles.test.ts b/ui/src/components/contextual-sidebar-styles.test.ts new file mode 100644 index 00000000000..10c5ddf2c4e --- /dev/null +++ b/ui/src/components/contextual-sidebar-styles.test.ts @@ -0,0 +1,16 @@ +import { describe, expect, it } from "vitest"; +import { contextualSidebarStyles } from "./contextual-sidebar-styles"; + +describe("contextualSidebarStyles.section", () => { + it("separates later sections with a margin and a top border", () => { + const classes = contextualSidebarStyles.section.split(" "); + expect(classes).toContain("mt-4"); + expect(classes).toContain("border-t"); + }); + + it("removes the margin and border from the first section", () => { + const classes = contextualSidebarStyles.section.split(" "); + expect(classes).toContain("first:mt-0"); + expect(classes).toContain("first:border-t-0"); + }); +}); diff --git a/ui/src/components/contextual-sidebar-styles.ts b/ui/src/components/contextual-sidebar-styles.ts index 3b05540f597..a88989b7f6d 100644 --- a/ui/src/components/contextual-sidebar-styles.ts +++ b/ui/src/components/contextual-sidebar-styles.ts @@ -7,7 +7,7 @@ export const contextualSidebarStyles = { nav: "flex min-h-0 flex-1 flex-col overflow-y-auto scrollbar-auto-hide px-3 py-2", group: "flex flex-col gap-0.5", - section: "mt-4 border-t border-border pt-3", + section: "mt-4 border-t border-border pt-3 first:mt-0 first:border-t-0", sectionLabel: "px-2 pb-1 text-(length:--text-micro) font-semibold uppercase tracking-wide text-muted-foreground", sectionDescription: