Fix error messages for empty results

packages/web/components/nav-containers/HighlightsContainer.tsx

@@ -76,9 +76,9 @@ export function HighlightsContainer(): JSX.Element {
       }}
     >
       {!isLoading && highlights.length < 1 && (
-        <Box css={{ width: '100%' }}>
+        <HStack css={{ width: '100%' }} alignment="center">
           <EmptyLibrary folder="highlights" />
-        </Box>
+        </HStack>
       )}
       {highlights.map((highlight) => {
         return (

packages/web/components/templates/homeFeed/EmptyLibrary.tsx

@@ -77,6 +77,10 @@ const Subtitle = (props: EmptyLibraryProps) => {
   )
   const titleText = (folder: string | undefined) => {
     switch (folder) {
+      case 'home':
+        return 'All your newly saved items and subscriptions will appear in your home section.'
+      case 'inbox':
+        return 'Items you have saved using the mobile apps and browser extensions, along with subscriptions you have moved into your library will appear here'
       case 'highlights':
         return 'Highlight text while reading to start building your highlights library.'
       case 'trash':
@@ -116,6 +120,7 @@ export const EmptyLibrary = (props: EmptyLibraryProps) => {
         height: '100%',
         pb: '100px',
         px: '25px',
+        maxWidth: '520px',
         color: '$thLibraryMenuSecondary',
         minHeight: `calc(100vh - ${DEFAULT_HEADER_HEIGHT})`,
       }}

packages/web/components/templates/library/LibraryContainer.tsx

@@ -956,7 +956,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
         {!showItems && props.fetchItemsError && <FetchItemsError />}
         {!showItems && !props.fetchItemsError && props.items.length <= 0 && (
           <EmptyLibrary
-            folder={props.folder}
+            folder={props.folder ?? 'home'}
             onAddLinkClicked={() => {
               props.setShowAddLinkModal(true)
             }}