Improve layout of library page headers
This commit is contained in:
@ -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={{
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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%' }}
|
||||
|
||||
Reference in New Issue
Block a user