feat(landlord-profile): enhance profile completion dialog and form layout

frontend/e2e/app.spec.ts

@@ -1,4 +1,4 @@
-import { expect, Page, test } from '@playwright/test';
+import { expect, Locator, Page, test } from '@playwright/test';
 
 async function mockUser(page: Page, authenticated: boolean, completeProfile = true): Promise<void> {
   await page.unroute('**/api/user');
@@ -43,6 +43,27 @@ async function expectNoHorizontalOverflow(page: Page): Promise<void> {
   expect(hasHorizontalOverflow).toBe(false);
 }
 
+async function expectNoScrollbars(locator: Locator): Promise<void> {
+  const scrollableElements = await locator.evaluate((element) => {
+    return [element, ...element.querySelectorAll<HTMLElement>('*')]
+      .filter((candidate) => {
+        const { overflowX, overflowY } = getComputedStyle(candidate);
+        const hasHorizontalScrollbar =
+          (overflowX === 'auto' || overflowX === 'scroll') &&
+          candidate.scrollWidth > candidate.clientWidth;
+        const hasVerticalScrollbar =
+          (overflowY === 'auto' || overflowY === 'scroll') &&
+          candidate.scrollHeight > candidate.clientHeight;
+        return hasHorizontalScrollbar || hasVerticalScrollbar;
+      })
+      .map(
+        (candidate) =>
+          `${candidate.tagName.toLowerCase()}.${candidate.getAttribute('class') ?? ''}`,
+      );
+  });
+  expect(scrollableElements).toEqual([]);
+}
+
 test.beforeEach(async ({ page }) => {
   await mockUser(page, false);
 });
@@ -74,13 +95,34 @@ test('requires a newly connected landlord to complete their profile', async ({ p
 
   const dialog = page.getByRole('dialog');
   await expect(dialog.getByRole('heading', { name: 'Complétez votre profil' })).toBeVisible();
+  await expectNoHorizontalOverflow(page);
+  await expectNoScrollbars(dialog);
   await page.keyboard.press('Escape');
   await expect(dialog).toBeVisible();
-  await expect(dialog.getByRole('button', { name: 'Déconnexion' })).toBeVisible();
+  const logoutButton = dialog.getByRole('button', { name: 'Déconnexion' });
+  const saveButton = dialog.getByRole('button', { name: 'Enregistrer le profil' });
+  await expect(logoutButton).toBeVisible();
+  await expect(saveButton).toBeVisible();
+
+  const [logoutBox, saveBox, actionBox, surfaceBox] = await Promise.all([
+    logoutButton.boundingBox(),
+    saveButton.boundingBox(),
+    dialog.locator('.profile-actions').boundingBox(),
+    dialog.locator('.mat-mdc-dialog-surface').boundingBox(),
+  ]);
+  if (!logoutBox || !saveBox || !actionBox || !surfaceBox) {
+    throw new Error('Profile dialog actions must be measurable.');
+  }
+  expect(logoutBox.x).toBeCloseTo(actionBox.x, 1);
+  expect(saveBox.x + saveBox.width).toBeCloseTo(actionBox.x + actionBox.width, 1);
+  expect(Math.abs(logoutBox.y - saveBox.y)).toBeLessThan(8);
+  expect(surfaceBox.y + surfaceBox.height - (actionBox.y + actionBox.height)).toBeGreaterThanOrEqual(
+    16,
+  );
 
   await dialog.getByLabel('Téléphone').fill('+33612345678');
   await dialog.getByLabel('Adresse postale').fill('1 rue des Lilas, Lyon');
-  await dialog.getByRole('button', { name: 'Enregistrer le profil' }).click();
+  await saveButton.click();
 
   await expect(dialog).toBeHidden();
   await expect(page.getByTestId('primary-navigation')).toBeVisible();