Huge bunch of UI/UX improvements and tweaks!

e2e/a11y.spec.js

@@ -109,19 +109,13 @@ test.describe("keyboard navigation", () => {
   test("escape closes login modal", async ({ page }) => {
     await page.goto("/member/dashboard");
 
-    // The page renders an inline "sign in required" wall for unauthenticated users
-    const signInBlock = page.locator("h2", { hasText: "Sign in required" });
-    await expect(signInBlock).toBeVisible({ timeout: 10000 });
-
-    // Click the Sign In button to open the login modal overlay
-    await page.locator("button", { hasText: "Sign In" }).click();
-
-    const modal = page.locator("text=Sign in to your dashboard");
-    await expect(modal.first()).toBeVisible({ timeout: 5000 });
+    // Auth middleware auto-opens the login modal for unauthenticated users
+    const modal = page.getByRole("dialog");
+    await expect(modal).toBeVisible({ timeout: 10000 });
 
     await page.keyboard.press("Escape");
 
     // Modal should close
-    await expect(modal.first()).not.toBeVisible({ timeout: 5000 });
+    await expect(modal).not.toBeVisible({ timeout: 5000 });
   });
 });

e2e/auth.spec.js

@@ -6,11 +6,15 @@ test.describe('Authentication flows', () => {
     // Navigate to a protected member page without being logged in
     await page.goto('/member/dashboard')
 
+    // Modal auto-opens on load; close it via the × button and wait for it to dismiss
+    await page.locator('.modal-close').click()
+    await expect(page.getByRole('dialog')).toBeHidden({ timeout: 5000 })
+
     // Page shows the unauth state with sign-in button
     await expect(page.getByRole('heading', { name: 'Sign in required' })).toBeVisible({ timeout: 10000 })
     await expect(page.getByRole('button', { name: 'Sign In' })).toBeVisible()
 
-    // Clicking Sign In opens the login modal with email input
+    // Clicking Sign In re-opens the login modal with email input
     await page.getByRole('button', { name: 'Sign In' }).click()
     await expect(page.locator('.modal-title')).toBeVisible({ timeout: 5000 })
     await expect(page.locator('input[type="email"]')).toBeVisible()
@@ -53,6 +57,8 @@ test.describe('Authentication flows', () => {
 
     // Navigating to a protected page should show the sign-in prompt
     await page.goto('/member/dashboard')
+    await page.locator('.modal-close').click()
+    await expect(page.getByRole('dialog')).toBeHidden({ timeout: 5000 })
     await expect(page.getByRole('heading', { name: 'Sign in required' })).toBeVisible({ timeout: 10000 })
   })
 })

e2e/member-dashboard.spec.js

@@ -28,7 +28,7 @@ test.describe('Member dashboard', () => {
 
     // Should show the login modal or the page's sign-in required state
     await expect(
-      page.locator('.modal-title').or(page.getByText('Sign in required'))
+      page.locator('.modal-title').or(page.getByText('Sign in required')).first()
     ).toBeVisible({ timeout: 10000 })
 
     await context.close()