fix(web-tests): stabilize async auth and usage page assertions

apps/web/src/app/(auth)/login/page.test.tsx

@@ -104,19 +104,28 @@ describe("LoginPage", (): void => {
     expect(screen.getByText("Loading authentication options")).toBeInTheDocument();
   });
 
-  it("renders the page heading and description", (): void => {
+  it("renders the page heading and description", async (): Promise<void> => {
     mockFetchConfig(EMAIL_ONLY_CONFIG);
 
     render(<LoginPage />);
 
+    await waitFor((): void => {
+      expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    });
+
     expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Welcome to Mosaic Stack");
     expect(screen.getByText(/Your personal assistant platform/i)).toBeInTheDocument();
   });
 
-  it("has proper layout styling", (): void => {
+  it("has proper layout styling", async (): Promise<void> => {
     mockFetchConfig(EMAIL_ONLY_CONFIG);
 
     const { container } = render(<LoginPage />);
+
+    await waitFor((): void => {
+      expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    });
+
     const main = container.querySelector("main");
     expect(main).toHaveClass("flex", "min-h-screen");
   });
@@ -430,37 +439,56 @@ describe("LoginPage", (): void => {
   /* ------------------------------------------------------------------ */
 
   describe("responsive layout", (): void => {
-    it("applies mobile-first padding to main element", (): void => {
+    it("applies mobile-first padding to main element", async (): Promise<void> => {
       mockFetchConfig(EMAIL_ONLY_CONFIG);
 
       const { container } = render(<LoginPage />);
+
+      await waitFor((): void => {
+        expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+      });
+
       const main = container.querySelector("main");
 
       expect(main).toHaveClass("p-4", "sm:p-8");
     });
 
-    it("applies responsive text size to heading", (): void => {
+    it("applies responsive text size to heading", async (): Promise<void> => {
       mockFetchConfig(EMAIL_ONLY_CONFIG);
 
       render(<LoginPage />);
 
+      await waitFor((): void => {
+        expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+      });
+
       const heading = screen.getByRole("heading", { level: 1 });
       expect(heading).toHaveClass("text-2xl", "sm:text-4xl");
     });
 
-    it("applies responsive padding to card container", (): void => {
+    it("applies responsive padding to card container", async (): Promise<void> => {
       mockFetchConfig(EMAIL_ONLY_CONFIG);
 
       const { container } = render(<LoginPage />);
+
+      await waitFor((): void => {
+        expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+      });
+
       const card = container.querySelector(".bg-white");
 
       expect(card).toHaveClass("p-4", "sm:p-8");
     });
 
-    it("card container has full width with max-width constraint", (): void => {
+    it("card container has full width with max-width constraint", async (): Promise<void> => {
       mockFetchConfig(EMAIL_ONLY_CONFIG);
 
       const { container } = render(<LoginPage />);
+
+      await waitFor((): void => {
+        expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+      });
+
       const wrapper = container.querySelector(".max-w-md");
 
       expect(wrapper).toHaveClass("w-full", "max-w-md");
@@ -539,7 +567,9 @@ describe("LoginPage", (): void => {
       });
 
       // LoginForm auto-focuses the email input on mount
-      expect(screen.getByLabelText(/email/i)).toHaveFocus();
+      await waitFor((): void => {
+        expect(screen.getByLabelText(/email/i)).toHaveFocus();
+      });
 
       // Tab forward through form: email -> password -> submit
       await user.tab();