From a82e276a11582b30421a52f03cc57bf946a79d0b Mon Sep 17 00:00:00 2001
From: nicdavidson <ndavidson1717@gmail.com>
Date: Tue, 1 Sep 2026 12:49:16 -0600
Subject: [PATCH] fix(login): stop the auth pane scrolling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The login card was height: 100% plus margin-top: 20vh, which made
mat-sidenav-content ~20vh taller than the viewport. Center with
min-height instead, and constrain the logo on narrow screens.

Fixes #517. Dist is not in this PR — rebuild on develop after merge.
---
 e2e/login-layout.spec.ts                      | 69 +++++++++++++++++++
 .../adf-user-management.scss                  | 11 +--
 .../df-login/df-login.component.scss          | 11 +--
 3 files changed, 81 insertions(+), 10 deletions(-)
 create mode 100644 e2e/login-layout.spec.ts

diff --git a/e2e/login-layout.spec.ts b/e2e/login-layout.spec.ts
new file mode 100644
index 000000000..4105ecd3c
--- /dev/null
+++ b/e2e/login-layout.spec.ts
@@ -0,0 +1,69 @@
+import { test, expect, Page } from '@playwright/test';
+
+const SHORT_AUTH_PATHS = [
+  '/dreamfactory/dist/#/auth/login',
+  '/dreamfactory/dist/#/auth/forgot-password',
+] as const;
+
+async function openAuthCard(page: Page, path: string) {
+  await page.goto(path);
+  await expect(page.locator('.user-management-card')).toBeVisible({
+    timeout: 15_000,
+  });
+}
+
+async function paneOverflow(page: Page) {
+  return page.evaluate(() => {
+    const pane =
+      document.querySelector('mat-sidenav-content') ||
+      document.querySelector('.sidenav-content');
+    if (!pane) {
+      return { overflowing: true, reason: 'missing pane' };
+    }
+    const container = document.querySelector(
+      '.user-management-card-container'
+    ) as HTMLElement | null;
+    return {
+      overflowing: pane.scrollHeight > pane.clientHeight + 1,
+      paneClientH: pane.clientHeight,
+      paneScrollH: pane.scrollHeight,
+      containerMarginTop: container
+        ? getComputedStyle(container).marginTop
+        : null,
+      containerHeight: container ? getComputedStyle(container).height : null,
+      containerMinHeight: container
+        ? getComputedStyle(container).minHeight
+        : null,
+    };
+  });
+}
+
+test.describe('Login layout', () => {
+  for (const path of SHORT_AUTH_PATHS) {
+    test(`desktop ${path} pane does not scroll`, async ({ page }) => {
+      await page.setViewportSize({ width: 1440, height: 900 });
+      await openAuthCard(page, path);
+
+      const metrics = await paneOverflow(page);
+      expect(
+        metrics.containerMarginTop,
+        `${path} reintroduced a stacked top margin`
+      ).toBe('0px');
+      expect(
+        metrics.overflowing,
+        `${path} pane scrolled (${metrics.paneScrollH} > ${metrics.paneClientH}); margin-top=${metrics.containerMarginTop}`
+      ).toBe(false);
+    });
+  }
+
+  test('laptop login pane does not scroll', async ({ page }) => {
+    await page.setViewportSize({ width: 1280, height: 720 });
+    await openAuthCard(page, '/dreamfactory/dist/#/auth/login');
+
+    const metrics = await paneOverflow(page);
+    expect(
+      metrics.overflowing,
+      `login pane scrolled (${metrics.paneScrollH} > ${metrics.paneClientH}); container margin-top=${metrics.containerMarginTop}`
+    ).toBe(false);
+  });
+});
diff --git a/src/app/adf-user-management/adf-user-management.scss b/src/app/adf-user-management/adf-user-management.scss
index 8d7760349..b8fac929b 100644
--- a/src/app/adf-user-management/adf-user-management.scss
+++ b/src/app/adf-user-management/adf-user-management.scss
@@ -9,7 +9,12 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  height: 100%;
+  // min-height (not height) so short cards can be flex-centered while
+  // taller register/reset forms grow and mat-sidenav-content can scroll.
+  // Do not add a viewport-relative margin; it stacks on the used height
+  // and forces a scrollbar (issue #517).
+  min-height: 100%;
+  box-sizing: border-box;
 
   .user-management-card {
     padding: 16px 16px;
@@ -78,7 +83,3 @@
     }
   }
 }
-
-.user-management-card-container {
-  margin-top: 20vh;
-}
diff --git a/src/app/adf-user-management/df-login/df-login.component.scss b/src/app/adf-user-management/df-login/df-login.component.scss
index 065f48d76..4bc7a6ec2 100644
--- a/src/app/adf-user-management/df-login/df-login.component.scss
+++ b/src/app/adf-user-management/df-login/df-login.component.scss
@@ -1,11 +1,12 @@
 .left-panel {
   display: block;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 16px;
+  width: 100%;
+  max-width: 445px;
+  margin: 16px auto 0;
 }
 
 .left-panel img {
-  min-width: 300px;
-  max-width: 445px;
+  display: block;
+  width: 100%;
+  height: auto;
 }