Fix book grid layout with long titles

- static/styles.css: use CSS grid instead of inline-block for .book-list
  so rows align consistently regardless of card content height; add
  overflow-wrap/word-break to titles/authors
- views/pages.templ: truncate long titles/authors server-side
  (truncateTitle helper) instead of relying on CSS line-clamp, which
  behaved inconsistently across browsers (esp. Firefox with flex);
  full title kept in title attribute and on the book detail page
- views/pages_templ.go regenerated via templ generate

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

static/styles.css

@@ -73,26 +73,28 @@ h2 {
 
 .book-list {
   list-style: none;
-  margin: 0 -0.25rem;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  margin: 0;
   padding: 0;
 }
 
 .book-item {
-  display: inline-block;
-  width: 33.3333%;
-  vertical-align: top;
   box-sizing: border-box;
-  padding: 0.25rem;
   margin: 0;
   border: none;
 }
 
 .book-card {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   border: 1px solid #000;
   padding: 0.5rem;
   color: inherit;
   text-decoration: none;
+  box-sizing: border-box;
 }
 
 .book-card-cover {
@@ -141,18 +143,25 @@ h2 {
   margin-bottom: 1rem;
 }
 
-.book-title {
-  display: block;
+.book-card .book-title {
   font-weight: bold;
   font-size: 0.95rem;
   line-height: 1.25;
   margin-bottom: 0.25rem;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .book-author,
 .book-author-detail {
   display: block;
   margin-top: 0.2rem;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .book-author {