gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-07-29 05:09:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: scroll auth canvas when preflight content overflows (#1521)

Browse Source 
Cap the auth card height and scroll its body so setup preflight checks
remain reachable on short viewports without clipping the Enter action.
This commit is contained in:
Anso
2026-06-29 20:28:51 -04:00
committed by GitHub
parent 1b9a40f874
commit da73ee0717
2 changed files with 40 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/auth/AuthCanvas.test.tsx
+36
View File
@@ -0,0 +1,36 @@
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { AuthCanvas } from './AuthCanvas';
describe('AuthCanvas', () => {
it('caps card height and scrolls overflowing body content', () => {
render(
<AuthCanvas footer={<span>Footer copy</span>}>
<p>Tall content</p>
</AuthCanvas>,
);
const card = screen.getByRole('group');
expect(card.className).toContain('max-h-[calc(100svh-5rem)]');
expect(card.className).toContain('flex-col');
const body = screen.getByText('Tall content').parentElement;
expect(body?.className).toContain('overflow-y-auto');
expect(body?.className).toContain('min-h-0');
expect(body?.className).toContain('flex-1');
});
it('keeps header and footer outside the scroll region', () => {
render(
<AuthCanvas footer={<span>Footer copy</span>}>
<p>Body</p>
</AuthCanvas>,
);
const header = screen.getByText('SENCHO').parentElement;
const footer = screen.getByText('Footer copy').parentElement;
expect(header?.className).toContain('shrink-0');
expect(footer?.className).toContain('shrink-0');
});
});
frontend/src/components/auth/AuthCanvas.tsx
+4 -4
View File
@@ -21,14 +21,14 @@ export function AuthCanvas({ children, className, footer, ...props }: AuthCanvas
<div
role="group"
className="relative w-full max-w-[440px] 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 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"
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">
<div className="animate-shimmer absolute inset-x-0 h-1/3 bg-gradient-to-b from-transparent via-white/60 to-transparent" />
</div>
<div className="flex items-center justify-between border-b border-card-border/60 px-7 pt-6 pb-4">
<div className="flex shrink-0 items-center justify-between border-b border-card-border/60 px-7 pt-6 pb-4">
<span className="font-mono text-[10px] uppercase tracking-[0.22em] text-stat-subtitle">
SENCHO
</span>
@@ -38,10 +38,10 @@ export function AuthCanvas({ children, className, footer, ...props }: AuthCanvas
</span>
</div>
<div className="px-7 pb-7 pt-6">{children}</div>
<div className="min-h-0 flex-1 overflow-y-auto px-7 pb-7 pt-6">{children}</div>
{footer && (
<div className="border-t border-card-border/60 px-7 py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
<div className="shrink-0 border-t border-card-border/60 px-7 py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
{footer}
</div>
)}