From e2a04c0ea6c5a9a41ea9ad7b330cdce002e89e57 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 15 Aug 2022 10:37:26 +0800
Subject: [PATCH] Improve layout of library page headers

---
 packages/web/components/templates/library/LibraryAvatar.tsx   | 2 +-
 .../web/components/templates/library/LibraryContainer.tsx     | 4 +++-
 .../web/components/templates/library/LibrarySearchBar.tsx     | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryAvatar.tsx b/packages/web/components/templates/library/LibraryAvatar.tsx
index e653036f3..c6576814c 100644
--- a/packages/web/components/templates/library/LibraryAvatar.tsx
+++ b/packages/web/components/templates/library/LibraryAvatar.tsx
@@ -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={{
diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 47d0d883b..e57a64428 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -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>
diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx
index 8831e7fdf..dbbc9d5d0 100644
--- a/packages/web/components/templates/library/LibrarySearchBar.tsx
+++ b/packages/web/components/templates/library/LibrarySearchBar.tsx
@@ -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%' }}