some more fixes

justfile

@@ -0,0 +1,42 @@
+set shell := ["bash", "-euo", "pipefail", "-c"]
+
+app := "Margin"
+bundle := "src-tauri/target/release/bundle/macos/" + app + ".app"
+
+default:
+    @just --list
+
+dev:
+    pnpm tauri dev
+
+build:
+    pnpm install --frozen-lockfile
+    APPLE_SIGNING_IDENTITY=- pnpm tauri build --bundles app
+    codesign --verify --deep --strict "{{bundle}}"
+
+install: build
+    #!/usr/bin/env bash
+    set -euo pipefail
+    if [ -w /Applications ]; then
+      dir=/Applications
+    else
+      dir="$HOME/Applications"
+      mkdir -p "$dir"
+    fi
+    dest="$dir/{{app}}.app"
+    if pgrep -x margin-app > /dev/null; then
+      osascript -e 'tell application id "studio.margin.app" to quit'
+      for _ in {1..40}; do
+        pgrep -x margin-app > /dev/null || break
+        sleep 0.25
+      done
+      if pgrep -x margin-app > /dev/null; then
+        echo "Margin is still running. Quit it and run just install again." >&2
+        exit 1
+      fi
+    fi
+    rm -rf "$dest"
+    ditto "{{bundle}}" "$dest"
+    codesign --verify --deep --strict "$dest"
+    echo "Installed {{app}} to $dest"
+    open "$dest"

src/components/Library.tsx

@@ -23,6 +23,16 @@ import { useBackup } from "../store/useBackup";
 import { useBook } from "../store/useBook";
 import { relativeTime } from "../time";
 
+function CardTitle({ title }: { title: string }) {
+  return (
+    <span className="card-title">
+      {title.split(/(\s+)/).map((word, index) =>
+        /\s/.test(word) ? word : <span key={index}>{word}</span>,
+      )}
+    </span>
+  );
+}
+
 export function Library({ onOpen }: { onOpen: (book: Book) => void }) {
   const [books, setBooks] = useState<BookSummary[]>([]);
   const [loaded, setLoaded] = useState(false);
@@ -117,14 +127,14 @@ export function Library({ onOpen }: { onOpen: (book: Book) => void }) {
         </button>
         {loaded && books.length === 0 && (
           <button className="card card-example" onClick={handleExample}>
-            <span className="card-title">The Lighthouse</span>
+            <CardTitle title="The Lighthouse" />
             <span className="card-badge">Example</span>
           </button>
         )}
         {books.map((b) =>
           b.corrupt ? (
             <div key={b.id} className="card card-book card-corrupt">
-              <span className="card-title">{b.title}</span>
+              <CardTitle title={b.title} />
               <span className="card-author">Couldn't be read; a .bak backup may sit beside it.</span>
               <RowMenu label="Project options" className="card-menu" onDelete={() => setPendingDelete(b)} />
             </div>
@@ -142,7 +152,7 @@ export function Library({ onOpen }: { onOpen: (book: Book) => void }) {
                 }
               }}
             >
-              <span className="card-title">{b.title || "Untitled"}</span>
+              <CardTitle title={b.title || "Untitled"} />
               {b.author && <span className="card-author">{b.author}</span>}
               {b.updatedAt > 0 && <span className="card-meta">Edited {relativeTime(b.updatedAt, now)}</span>}
               <RowMenu label="Project options" className="card-menu" onDelete={() => setPendingDelete(b)} />

src/styles/app.css

@@ -1599,14 +1599,22 @@ body.resizing .sidebar {
 
 .card-title {
   max-width: 100%;
-  overflow-wrap: anywhere;
   font-family: var(--font-book);
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 500;
-  line-height: 1.18;
+  line-height: 1.35;
   color: var(--ink);
 }
 
+.card-title > span {
+  display: inline-block;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  vertical-align: bottom;
+}
+
 .card-author {
   max-width: 100%;
   overflow-wrap: anywhere;