Update UI layout and enhance email confirmation test

The UI layout for the site header, site footer, and account section was updated to improve visual spacing and arrangement. In addition, the authentication test for email confirmation was enhanced, specifically by adding checking that the response from visiting the mailbox is not null. This improves the robustness and reliability of the test.

apps/e2e/tests/authentication/auth.po.ts

@@ -1,4 +1,4 @@
-import { Page } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
 import { Mailbox } from '../utils/mailbox';
 
 export class AuthPageObject {
@@ -50,7 +50,11 @@ export class AuthPageObject {
   async visitConfirmEmailLink(email: string) {
     await this.page.waitForTimeout(300);
 
-    await this.mailbox.visitMailbox(email);
+    return expect(async() => {
+      const res = await this.mailbox.visitMailbox(email);
+
+      expect(res).not.toBeNull();
+    }).toPass();
   }
 
   createRandomEmail() {

apps/web/app/(marketing)/_components/site-footer.tsx

@@ -14,7 +14,7 @@ export function SiteFooter() {
         <div className={'flex flex-col space-y-8 lg:flex-row lg:space-y-0'}>
           <div
             className={
-              'flex w-full space-x-2 lg:w-4/12 xl:w-3/12' +
+              'flex w-full space-x-2 lg:w-4/12 xl:w-4/12' +
               ' xl:space-x-6 2xl:space-x-8'
             }
           >
@@ -23,16 +23,18 @@ export function SiteFooter() {
                 <AppLogo className={'w-[85px] md:w-[115px]'} />
               </div>
 
-              <div>
+              <div className={'flex flex-col space-y-2'}>
-                <p className={'text-sm text-muted-foreground'}>
+                <div>
-                  Add a short tagline about your product
+                  <p className={'text-sm text-muted-foreground'}>
-                </p>
+                    Add a short tagline about your product
-              </div>
+                  </p>
+                </div>
 
-              <div className={'flex text-xs text-muted-foreground'}>
+                <div className={'flex text-xs text-muted-foreground'}>
-                <p>
+                  <p>
-                  © Copyright {YEAR} {appConfig.name}. All Rights Reserved.
+                    © Copyright {YEAR} {appConfig.name}. All Rights Reserved.
-                </p>
+                  </p>
+                </div>
               </div>
             </div>
           </div>

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -56,7 +56,7 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
 
 function AuthButtons() {
   return (
-    <div className={'flex space-x-0.5'}>
+    <div className={'flex space-x-2'}>
       <div className={'hidden space-x-0.5 md:flex'}>
         <ModeToggle />