Improve layout of library page headers

This commit is contained in:
Jackson Harper
2022-08-15 10:37:26 +08:00
parent e4ee66e6ab
commit e2a04c0ea6
3 changed files with 5 additions and 3 deletions

View File

@ -10,7 +10,7 @@ type AvatarProps = {
export function LibraryAvatar(props: AvatarProps): JSX.Element {
return (
<VStack alignment="center" distribution="start" css={{ pl: '8px', pt: '20px', width: '100%', height: '100%' }}>
<VStack alignment="center" distribution="start" css={{ pl: '8px', width: '100%', height: '100%' }}>
<VStack css={{ height: '100%' }}>
<StyledAvatar
css={{

View File

@ -17,7 +17,9 @@ export function LibraryContainer(): JSX.Element {
<>
<VStack alignment="start" distribution="start" css={{ width: '100vw', height: '100vh', overflow: 'hidden', bg: '$libraryBackground' }}>
<HStack alignment="start" distribution="start" css={{ width: '100%' }}>
<LibrarySearchBar />
<SpanBox css={{ width: '100%', height: '90px' }}>
<LibrarySearchBar />
</SpanBox>
<SpanBox css={{ marginLeft: 'auto', width: '130px', height: '100%' }}>
<LibraryAvatar viewer={viewerData?.me} />
</SpanBox>

View File

@ -19,7 +19,7 @@ export function LibrarySearchBar(): JSX.Element {
return (
<>
<VStack alignment="start" distribution="start" css={{ pl: '32px', pt: '20px', width: '100%', height: '110px' }}>
<VStack alignment="start" distribution="start" css={{ pl: '32px', width: '100%', height: '100%' }}>
<HStack alignment="start" distribution="start" css={{ width: '100%' }}>
<form
style={{ width: '100%' }}