CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-13 21:01:21 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fixed vertical centering of stack server signin

Browse Source
This commit is contained in:
Zai Shi 2024-04-16 12:08:08 +02:00
parent 72711f758b
commit 246669d779
2 changed files with 29 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/stack-server/src/app/(main)/handler/[...stack]/layout.tsx
View File

@ -5,9 +5,9 @@ import { Box, Stack } from '@mui/joy';
export default function Layout(props: { children: React.ReactNode }) {
const headerHeight = 50;
return (
<Stack direction="column" height='100vh' overflow='hidden'>
<Stack direction="column" height='100vh'>
<Header headerHeight={headerHeight} />
<Box height={'100%'} overflow='auto'>
<Box flexGrow={1}>
{props.children}
</Box>
</Stack>

52
packages/stack-server/src/components/header.tsx
View File

@ -1,35 +1,37 @@
"use client";
import { Logo } from "@/components/logo";
import { Sheet, SheetProps, Stack } from "@mui/joy";
import { Box, Sheet, SheetProps, Stack } from "@mui/joy";
import { UserButton } from "@stackframe/stack";
export function Header(props: SheetProps & { headerHeight: number }) {
const { headerHeight, ...sheetProps } = props;
return (
<Sheet
variant="outlined"
component="header"
{...sheetProps}
sx={{
paddingX: 1,
position: 'sticky',
top: 0,
zIndex: 30,
borderTop: 'none',
borderLeft: 'none',
borderRight: 'none',
display: 'flex',
alignItems: 'stretch',
justifyContent: 'space-between',
height: `${headerHeight}px`,
...(sheetProps.sx ?? {}),
}}
>
<Stack sx={{ marginLeft: 2, justifyContent: 'center', height: headerHeight - 1 }}>
<Logo full height={24} href="/projects" />
</Stack>
<UserButton />
</Sheet>
<>
<Sheet
variant="outlined"
component="header"
{...sheetProps}
sx={{
paddingX: 1,
position: 'sticky',
top: 0,
zIndex: 30,
borderTop: 'none',
borderLeft: 'none',
borderRight: 'none',
display: 'flex',
alignItems: 'stretch',
justifyContent: 'space-between',
height: `${headerHeight}px`,
...(sheetProps.sx ?? {}),
}}
>
<Stack sx={{ marginLeft: 2, justifyContent: 'center', height: headerHeight - 1 }}>
<Logo full height={24} href="/projects" />
</Stack>
<UserButton />
</Sheet>
</>
);
}