gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-08-13 04:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: make auth canvas scroll actually constrain on short viewports (#1523)

Browse Source 
PR #1521 added max-height and overflow-y-auto but the card stayed content-
sized because flex items default to min-height:auto and justify-center
clipped overflow while html/body stay overflow:hidden. Add min-h-0 and
my-auto, use dvh, scroll the auth shell, and pin Enter Sencho outside the
preflight scroll region.
This commit is contained in:
Anso
2026-06-29 21:13:32 -04:00
committed by GitHub
parent 322d337d20
commit e1176fbb26
3 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/auth/AuthCanvas.test.tsx
+6 -1
View File
@@ -11,9 +11,14 @@ describe('AuthCanvas', () => {
);
const card = screen.getByRole('group');
expect(card.className).toContain('max-h-[calc(100svh-5rem)]');
expect(card.className).toContain('max-h-[calc(100dvh-5rem)]');
expect(card.className).toContain('min-h-0');
expect(card.className).toContain('my-auto');
expect(card.className).toContain('flex-col');
const shell = card.parentElement;
expect(shell?.className).toContain('overflow-y-auto');
const body = screen.getByText('Tall content').parentElement;
expect(body?.className).toContain('overflow-y-auto');
expect(body?.className).toContain('min-h-0');
frontend/src/components/auth/AuthCanvas.tsx
+5 -2
View File
@@ -9,7 +9,10 @@ export function AuthCanvas({ children, className, footer, ...props }: AuthCanvas
return (
<div
className={cn(
'relative flex min-h-svh flex-col items-center justify-center px-4 py-10 sm:px-6',
// overflow-y-auto: html/body are overflow:hidden, so this shell must scroll
// when the card still exceeds the viewport. my-auto on the card centers it
// when content is short (replaces justify-center, which clips tall cards).
'relative flex min-h-svh flex-col items-center overflow-y-auto px-4 py-10 sm:px-6',
className,
)}
{...props}
@@ -21,7 +24,7 @@ export function AuthCanvas({ children, className, footer, ...props }: AuthCanvas
<div
role="group"
className="relative flex max-h-[calc(100svh-5rem)] w-full max-w-[440px] flex-col animate-scale-in overflow-hidden rounded-lg border border-card-border border-t-card-border-top bg-card text-card-foreground shadow-card-bevel"
className="relative my-auto flex min-h-0 w-full max-w-[440px] max-h-[calc(100dvh-5rem)] flex-col animate-scale-in overflow-hidden rounded-lg border border-card-border border-t-card-border-top bg-card text-card-foreground shadow-card-bevel"
style={{ animationDuration: 'var(--duration-base)', animationTimingFunction: 'var(--ease-out-expo)' }}
>
<div aria-hidden className="absolute inset-y-0 left-0 w-[3px] overflow-hidden bg-brand/70">