From e6623b2784652e2f646b4a63c4d46f7759c4d6f3 Mon Sep 17 00:00:00 2001
From: "v.lagerev" <lagerev.vl@gmail.com>
Date: Sat, 25 Apr 2026 20:18:38 +0300
Subject: [PATCH] fix(auth): stabilize compact auth form scrolling

---
 src/app/pages/auth/AuthLayout.tsx | 205 ++++++++++++++++--------------
 src/app/pages/auth/styles.css.ts  |  35 ++---
 2 files changed, 122 insertions(+), 118 deletions(-)

diff --git a/src/app/pages/auth/AuthLayout.tsx b/src/app/pages/auth/AuthLayout.tsx
index 19671a55..d720522f 100644
--- a/src/app/pages/auth/AuthLayout.tsx
+++ b/src/app/pages/auth/AuthLayout.tsx
@@ -77,6 +77,17 @@ function ServerEditDialog({
     inputRef.current?.select();
   }, []);
 
+  useEffect(() => {
+    const handleKeyDown = (evt: KeyboardEvent) => {
+      if (evt.key === 'Escape' && !evt.defaultPrevented && !evt.isComposing) {
+        onCancel();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onCancel]);
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     const trimmed = value.trim();
@@ -84,12 +95,7 @@ function ServerEditDialog({
   };
 
   return (
-    <div
-      className={css.ServerDialog}
-      role="dialog"
-      aria-modal="true"
-      onKeyDown={(e) => { if (e.key === 'Escape') onCancel(); }}
-    >
+    <div className={css.ServerDialog} role="dialog" aria-modal="true" tabIndex={-1}>
       <div className={css.ServerDialogBackdrop} onClick={onCancel} aria-hidden="true" />
       <div className={css.ServerDialogCard}>
         <Text size="H3" style={{ color: '#e8e4df', fontWeight: 600 }}>
@@ -110,13 +116,7 @@ function ServerEditDialog({
               placeholder={t('Auth.homeserver_dialog_placeholder')}
             />
             <Box gap="300" justifyContent="End">
-              <Button
-                type="button"
-                variant="Secondary"
-                fill="Soft"
-                size="400"
-                onClick={onCancel}
-              >
+              <Button type="button" variant="Secondary" fill="Soft" size="400" onClick={onCancel}>
                 <Text size="B400">{t('Auth.homeserver_dialog_cancel')}</Text>
               </Button>
               <Button type="submit" variant="Primary" size="400">
@@ -153,13 +153,19 @@ function calculateModalLayout(input: {
   bottomGap: number;
 }) {
   const desiredTop = input.mascotTopOffset + input.mascotHeight * input.anchorRatio;
-  const maxTop = input.pageHeight - input.footerHeight - input.bottomGap - input.modalHeight;
+  const canFitAboveFooter =
+    input.modalHeight <= input.pageHeight - input.minTop - input.footerHeight - input.bottomGap;
+  const reservedFooterHeight = canFitAboveFooter ? input.footerHeight : 0;
+  const reservedBottomGap = canFitAboveFooter ? input.bottomGap : 0;
+
+  const maxTop = input.pageHeight - reservedFooterHeight - reservedBottomGap - input.modalHeight;
   const top = Math.max(input.minTop, Math.min(desiredTop, maxTop));
-  const maxHeight = Math.max(0, input.pageHeight - input.footerHeight - input.bottomGap - top);
+  const maxHeight = input.pageHeight - reservedFooterHeight - reservedBottomGap - top;
+
   return {
     top: Math.round(top),
-    maxHeight: Math.floor(maxHeight),
-    constrained: input.modalHeight > maxHeight,
+    maxHeight: Math.max(0, Math.floor(maxHeight)),
+    constrained: input.modalHeight > maxHeight + 1,
   };
 }
 
@@ -231,37 +237,39 @@ export function AuthLayout() {
   /* ── Refs for JS-driven layout ── */
   const pageRef = useRef<HTMLDivElement>(null);
   const mascotRef = useRef<HTMLDivElement>(null);
-  const modalRef = useRef<HTMLDivElement>(null);
-  const footerRef = useRef<HTMLElement>(null);
   const cardContentRef = useRef<HTMLDivElement>(null);
+  const cardBodyRef = useRef<HTMLDivElement>(null);
+  const footerRef = useRef<HTMLElement>(null);
 
   useLayoutEffect(() => {
     const page = pageRef.current;
     const mascot = mascotRef.current;
-    const modal = modalRef.current;
+    const cardContent = cardContentRef.current;
+    const cardBody = cardBodyRef.current;
     const footer = footerRef.current;
-    if (!page || !mascot || !modal || !footer) return undefined;
+    if (!page || !mascot || !cardContent || !cardBody || !footer) return undefined;
 
     let frameId = 0;
     const update = (): void => {
       cancelAnimationFrame(frameId);
       frameId = requestAnimationFrame(() => {
         const s = getComputedStyle(page);
+        const footerHeight =
+          footer.offsetHeight || readPx(s, '--vojo-footer-space', footer.offsetHeight);
+        const bottomGap = readPx(s, '--vojo-modal-gap');
         const layout = calculateModalLayout({
           pageHeight: page.clientHeight,
           mascotTopOffset: readPx(s, '--vojo-mascot-top'),
           mascotHeight: mascot.offsetHeight,
-          modalHeight: modal.scrollHeight,
-          footerHeight: footer.offsetHeight || readPx(s, '--vojo-footer-space', footer.offsetHeight),
+          modalHeight: cardBody.offsetHeight,
+          footerHeight,
           anchorRatio: readNum(s, '--vojo-anchor-ratio', 0.58),
           minTop: readPx(s, '--vojo-modal-min-top'),
-          bottomGap: readPx(s, '--vojo-modal-gap'),
+          bottomGap,
         });
         page.style.setProperty('--vojo-modal-top', `${layout.top}px`);
         page.style.setProperty('--vojo-modal-max-h', `${layout.maxHeight}px`);
-        if (cardContentRef.current) {
-          cardContentRef.current.classList.toggle(css.AuthCardContentConstrained, layout.constrained);
-        }
+        cardContent.classList.toggle(css.AuthCardContentScrollable, layout.constrained);
       });
     };
 
@@ -269,6 +277,7 @@ export function AuthLayout() {
     const ro = new ResizeObserver(update);
     ro.observe(page);
     ro.observe(mascot);
+    ro.observe(cardBody);
     ro.observe(footer);
     window.addEventListener('resize', update);
 
@@ -285,79 +294,83 @@ export function AuthLayout() {
         <AuthMascot mascotRef={mascotRef} />
 
         <div className={css.AuthModalZone}>
-          <div className={css.AuthCard} ref={modalRef}>
+          <div className={css.AuthCard}>
             <div className={css.AuthCardContent} ref={cardContentRef}>
-              {/* Title */}
-              <Text size="H2" style={{ color: '#e8e4df', fontWeight: 700 }}>
-                {pageTitle}
-              </Text>
+              <div className={css.AuthCardBody} ref={cardBodyRef}>
+                {/* Title */}
+                <Text size="H2" style={{ color: '#e8e4df', fontWeight: 700 }}>
+                  {pageTitle}
+                </Text>
 
-              {/* Server info row with separator */}
-              <div className={css.ServerRow}>
-                <span className={css.ServerLabel}>{t('Auth.homeserver')}</span>
-                <span className={css.ServerName}>{server}</span>
-                {clientConfig.allowCustomHomeservers && (
-                  <button
-                    type="button"
-                    className={css.ServerEdit}
-                    onClick={() => setShowServerDialog(true)}
-                  >
-                    {t('Auth.homeserver_edit')}
-                  </button>
+                {/* Server info row with separator */}
+                <div className={css.ServerRow}>
+                  <span className={css.ServerLabel}>{t('Auth.homeserver')}</span>
+                  <span className={css.ServerName}>{server}</span>
+                  {clientConfig.allowCustomHomeservers && (
+                    <button
+                      type="button"
+                      className={css.ServerEdit}
+                      onClick={() => setShowServerDialog(true)}
+                    >
+                      {t('Auth.homeserver_edit')}
+                    </button>
+                  )}
+                </div>
+
+                {/* Loading / error / form */}
+                {discoveryState.status === AsyncStatus.Loading && (
+                  <AuthLayoutLoading message={t('Auth.loading_server')} />
+                )}
+                {discoveryState.status === AsyncStatus.Error && (
+                  <AuthLayoutError message={t('Auth.error_server_not_found')} />
+                )}
+                {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_PROMPT && (
+                  <AuthLayoutError
+                    message={t('Auth.error_server_config_invalid', {
+                      host: autoDiscoveryError.host,
+                    })}
+                  />
+                )}
+                {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_ERROR && (
+                  <AuthLayoutError message={t('Auth.error_server_base_url_invalid')} />
+                )}
+                {discoveryState.status === AsyncStatus.Success && autoDiscoveryInfo && (
+                  <AuthServerProvider value={discoveryState.data.serverName}>
+                    <AutoDiscoveryInfoProvider value={autoDiscoveryInfo}>
+                      <SpecVersionsLoader
+                        baseUrl={autoDiscoveryInfo['m.homeserver'].base_url}
+                        fallback={() => (
+                          <AuthLayoutLoading
+                            message={t('Auth.loading_connecting', {
+                              url: autoDiscoveryInfo['m.homeserver'].base_url,
+                            })}
+                          />
+                        )}
+                        error={() => (
+                          <AuthLayoutError message={t('Auth.error_server_unavailable')} />
+                        )}
+                      >
+                        {(specVersions) => (
+                          <SpecVersionsProvider value={specVersions}>
+                            <AuthFlowsLoader
+                              fallback={() => (
+                                <AuthLayoutLoading message={t('Auth.loading_auth_flows')} />
+                              )}
+                              error={() => <AuthLayoutError message={t('Auth.error_auth_flows')} />}
+                            >
+                              {(authFlows) => (
+                                <AuthFlowsProvider value={authFlows}>
+                                  <Outlet />
+                                </AuthFlowsProvider>
+                              )}
+                            </AuthFlowsLoader>
+                          </SpecVersionsProvider>
+                        )}
+                      </SpecVersionsLoader>
+                    </AutoDiscoveryInfoProvider>
+                  </AuthServerProvider>
                 )}
               </div>
-
-              {/* Loading / error / form */}
-              {discoveryState.status === AsyncStatus.Loading && (
-                <AuthLayoutLoading message={t('Auth.loading_server')} />
-              )}
-              {discoveryState.status === AsyncStatus.Error && (
-                <AuthLayoutError message={t('Auth.error_server_not_found')} />
-              )}
-              {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_PROMPT && (
-                <AuthLayoutError
-                  message={t('Auth.error_server_config_invalid', { host: autoDiscoveryError.host })}
-                />
-              )}
-              {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_ERROR && (
-                <AuthLayoutError message={t('Auth.error_server_base_url_invalid')} />
-              )}
-              {discoveryState.status === AsyncStatus.Success && autoDiscoveryInfo && (
-                <AuthServerProvider value={discoveryState.data.serverName}>
-                  <AutoDiscoveryInfoProvider value={autoDiscoveryInfo}>
-                    <SpecVersionsLoader
-                      baseUrl={autoDiscoveryInfo['m.homeserver'].base_url}
-                      fallback={() => (
-                        <AuthLayoutLoading
-                          message={t('Auth.loading_connecting', { url: autoDiscoveryInfo['m.homeserver'].base_url })}
-                        />
-                      )}
-                      error={() => (
-                        <AuthLayoutError message={t('Auth.error_server_unavailable')} />
-                      )}
-                    >
-                      {(specVersions) => (
-                        <SpecVersionsProvider value={specVersions}>
-                          <AuthFlowsLoader
-                            fallback={() => (
-                              <AuthLayoutLoading message={t('Auth.loading_auth_flows')} />
-                            )}
-                            error={() => (
-                              <AuthLayoutError message={t('Auth.error_auth_flows')} />
-                            )}
-                          >
-                            {(authFlows) => (
-                              <AuthFlowsProvider value={authFlows}>
-                                <Outlet />
-                              </AuthFlowsProvider>
-                            )}
-                          </AuthFlowsLoader>
-                        </SpecVersionsProvider>
-                      )}
-                    </SpecVersionsLoader>
-                  </AutoDiscoveryInfoProvider>
-                </AuthServerProvider>
-              )}
             </div>
           </div>
         </div>
diff --git a/src/app/pages/auth/styles.css.ts b/src/app/pages/auth/styles.css.ts
index 01039433..3b16ed95 100644
--- a/src/app/pages/auth/styles.css.ts
+++ b/src/app/pages/auth/styles.css.ts
@@ -108,14 +108,25 @@ export const AuthCard = style({
 });
 
 export const AuthCardContent = style({
-  display: 'flex',
-  flexDirection: 'column',
   borderRadius: 'inherit',
   backgroundColor: 'rgba(18, 19, 22, 0.55)',
   backdropFilter: 'blur(22px) saturate(150%)',
   WebkitBackdropFilter: 'blur(22px) saturate(150%)',
   border: '1px solid rgba(255, 255, 255, 0.08)',
   width: `min(${toRem(492)}, calc(100vw - 2rem))`,
+  boxSizing: 'border-box',
+  maxHeight: 'var(--vojo-modal-max-h)',
+  overflowY: 'hidden',
+});
+
+export const AuthCardContentScrollable = style({
+  overflowY: 'auto',
+  overscrollBehavior: 'contain',
+});
+
+export const AuthCardBody = style({
+  display: 'flex',
+  flexDirection: 'column',
   padding: `${toRem(32)} ${toRem(40)}`,
   boxSizing: 'border-box',
   gap: toRem(20),
@@ -128,12 +139,6 @@ export const AuthCardContent = style({
   },
 });
 
-export const AuthCardContentConstrained = style({
-  maxHeight: 'var(--vojo-modal-max-h)',
-  overflowY: 'auto',
-  overscrollBehavior: 'contain',
-});
-
 /* ── Server info row ── */
 export const ServerRow = style({
   display: 'grid',
@@ -285,20 +290,6 @@ globalStyle(`${AuthCardContent} input::placeholder`, {
   color: 'rgba(232, 228, 223, 0.35)',
 });
 
-/*
- * Floor for input boxes when the modal is height-constrained (small screen
- * or on-screen keyboard). Natural input height is 3rem; floor at 2rem so
- * the keyboard can still squeeze the form to ~66% before hitting the stop.
- * Past the floor, flex can't compress further — the form overflows the
- * AuthLayout (overflow: hidden) and the bottom is covered by the keyboard.
- *
- * `:has(> input)` targets the folds Input's outer wrapper (the box that
- * flex-shrinks) rather than the native <input>. Excludes checkboxes.
- */
-globalStyle(`${AuthCardContent} div:has(> input:not([type="checkbox"]))`, {
-  minHeight: toRem(48),
-});
-
 /*
  * Chromium's UA stylesheet paints a saved-credentials overlay on
  * :-webkit-autofill inputs, forcing a light background and dark text. Without