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

fixed account-setting styling issues

Browse Source
This commit is contained in:
Zai Shi 2024-09-20 13:28:20 -07:00
parent e71b7c2974
commit e3a8b43fd5
2 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/stack/src/components-page/account-settings.tsx
View File

@ -42,7 +42,7 @@ export function AccountSettings(props: {
return (
<MaybeFullPage fullPage={!!props.fullPage}>
<div style={{ alignSelf: 'stretch', flexGrow: 1 }}>
<div style={{ alignSelf: 'stretch', flexGrow: 1, width: 0 }}>
<SidebarLayout
items={([
{
@ -113,7 +113,7 @@ function Section(props: { title: string, description?: string, children: React.R
{props.description}
</Typography>}
</div>
<div className='sm:flex-1 flex flex-col gap-2'>
<div className='sm:flex-1 sm:items-end flex flex-col gap-2 '>
{props.children}
</div>
</div>
@ -637,8 +637,9 @@ function useMemberInvitationSection(props: { team: Team }) {
<form
onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
noValidate
className='w-full'
>
<div className="flex flex-col gap-4 md:flex-row">
<div className="flex flex-col gap-4 sm:flex-row w-full">
<Input
placeholder={t("Email")}
{...register("email")}
@ -737,7 +738,7 @@ export function TeamCreation() {
<form
onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
noValidate
className='flex gap-2'
className='flex gap-2 flex-col sm:flex-row'
>
<div className='flex flex-col flex-1'>
<Input

8
packages/stack/src/components/elements/sidebar-layout.tsx
View File

@ -68,15 +68,15 @@ function DesktopLayout(props: { items: SidebarItem[], title?: ReactNode, selecte
const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.selectedIndex];
return (
<div className="stack-scope flex w-full h-full">
<div className="flex w-[200px] border-r flex-col items-stretch gap-2 p-2">
<div className="stack-scope flex w-full h-full max-w-full">
<div className="fixed top-0 left-0 bottom-0 flex max-w-[200px] min-w-[200px] border-r flex-col items-stretch gap-2 p-2 overflow-y-auto">
{props.title && <div className='mb-2 ml-2'>
<Typography type='h2' className="text-lg font-semibold text-zinc-800 dark:text-zinc-300">{props.title}</Typography>
</div>}
<Items items={props.items} basePath={props.basePath} selectedIndex={props.selectedIndex} />
</div>
<div className="flex-1 flex flex-col items-center gap-4 py-2 px-4">
<div className="ml-[200px] flex-1 w-0 flex justify-center gap-4 py-2 px-4">
<div className='flex flex-col max-w-[800px] w-[800px]'>
<div className='mt-4 mb-6'>
<Typography type='h4' className='font-semibold'>{selectedItem.title}</Typography>
@ -110,7 +110,7 @@ function MobileLayout(props: { items: SidebarItem[], title?: ReactNode, selected
<div className="flex-1 flex flex-col gap-4 py-2 px-4">
<div className='flex flex-col'>
<div className='flex justify-between'>
<Typography type='h4'>{selectedItem.title}</Typography>
<Typography type='h4' className='font-semibold'>{selectedItem.title}</Typography>
<Button
variant='ghost'
size='icon'