fix(design): the nav rail's footer rows (language, About, Sign out) share the rail row and glyph (E28)

frontend/src/components/ui/NavRail.dom.test.tsx

@@ -3,10 +3,12 @@
 // E28 S3d (B7): the nav rail's row. Icon-only, its name is the module's full name (with an unread
 // count, which was only ever drawn); with the labels on, the name is the short label the user SEES
 // (WCAG 2.5.3), the full one staying in the tooltip. "You are here" is aria-current plus the tint.
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, render, screen } from "@testing-library/react";
 import { Bell } from "lucide-react";
-import { NavRailItem } from "./NavRail";
+import { NavRailAction, NavRailItem } from "./NavRail";
 
 vi.mock("../../lib/hints", () => ({ hintsEnabled: () => true, subscribeHints: () => () => {} }));
 
@@ -45,3 +47,20 @@ describe("NavRailItem", () => {
     expect(row.getAttribute("aria-current")).toBeNull();
   });
 });
+
+// F32: the rail's footer (language, About, Sign out) drew 32 and 36 squares with 16 and 20px glyphs
+// beside the 36-tall full-width rows, so its spacing and glyphs broke the column. An action is a row too.
+describe("NavRailAction", () => {
+  it("is a named rail row, not a toolbar icon button", () => {
+    render(<NavRailAction icon={Bell} label="About" onClick={() => {}} />);
+    const row = screen.getByRole("button", { name: "About" });
+    expect(row.className).toContain("h-9");
+    expect(row.className).toContain("w-full");
+    expect(row.querySelector("svg")?.getAttribute("class")).toContain("size-4.5");
+  });
+
+  it("the nav rail holds no toolbar icon button", () => {
+    const src = readFileSync(resolve(__dirname, "../NavSidebar.tsx"), "utf8");
+    expect(src).not.toMatch(/<IconButton[\s>]/);
+  });
+});