From 39a590c7d9e41dce2207847e328b311647308dae Mon Sep 17 00:00:00 2001
From: Chris Griffing <cmgriffing@gmail.com>
Date: Thu, 1 Feb 2024 16:25:56 -0800
Subject: [PATCH] fix: handle overlapping text in books sidebar

---
 src/App.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3c7daee..29f9b0f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -286,6 +286,7 @@ export function App() {
                 return !node.isLeaf ? (
                   <Flex direction={"column"}>
                     <Flex
+                      className="foo"
                       style={style}
                       justify={"space-between"}
                       pr={32}
@@ -293,9 +294,20 @@ export function App() {
                     >
                       <Flex>
                         <FolderArrow node={node} />
-                        <Text className="single-line-ellipsis" maw="210px">
+                        <Text
+                          className="single-line-ellipsis"
+                          maw={
+                            !!book.chapters.length && ready ? "210px" : "140px"
+                          }
+                        >
                           {node.data.book.title}
                         </Text>
+
+                        {!book.chapters.length && ready && (
+                          <Text c="red" ml="0.5rem">
+                            (empty)
+                          </Text>
+                        )}
                       </Flex>
                       <Menu shadow="md">
                         <Menu.Target>
@@ -429,12 +441,6 @@ export function App() {
                         </Menu.Dropdown>
                       </Menu>
                     </Flex>
-                    {!book.chapters.length && ready && (
-                      <Flex px="2rem" justify="center" align="center">
-                        Chapters not found. You can create one using the menu
-                        above.
-                      </Flex>
-                    )}
                   </Flex>
                 ) : (
                   <div ref={dragHandle} style={style}>