fix(ui): render drawer close glyph and tighten mobile heading

packages/ui/test/account-shell-regressions.test.ts

@@ -8,6 +8,23 @@ import { Window } from "happy-dom";
 const source = (name: string) => readFileSync(uiComponentPath(name), "utf8");
 
 describe("account shell UI regressions", () => {
+  test("Drawer has a self-contained close icon and a compact centered mobile header", async () => {
+    const dom = mountHtml(
+      await renderComponent(source("Drawer"), { title: "Account center", open: true, duration: 0 }),
+    );
+    const close = dom.querySelector(".wrn-drawer__close") as HTMLButtonElement;
+    expect(close.getAttribute("aria-label")).toBe("Close drawer");
+    expect(close.querySelector('svg[aria-hidden="true"] path')).not.toBeNull();
+    expect(close.querySelector('[class*="icon-"]')).toBeNull();
+    expect(source("Drawer")).toMatch(/\.wrn-drawer__header\s*\{[^}]*align-items: center;/);
+    expect(source("Drawer")).toContain("padding-block: 0.75rem;");
+    let closed = false;
+    dom.querySelector('[data-ui-component="Drawer"]')?.addEventListener("wrnexus:close", () => {
+      closed = true;
+    });
+    close.click();
+    expect(closed).toBe(true);
+  });
   test("Dropdown allows anchored mobile menus without changing existing sheet defaults", async () => {
     for (const mobilePanel of [undefined, "dropdown", "sheet"]) {
       const dom = mountHtml(