refactor: Update SearchResultsWork layout and enhance styling for book notes (#11670)

* Replace footer with a styled div for better presentation of book notes
* Add new CSS class for list book notes to improve layout and readability
* Define line-height for short snippets to ensure consistent typography

Author: cdrini

openlibrary/macros/SearchResultsWork.html

@@ -229,6 +229,7 @@ <h3 itemprop="name" class="booktitle">
   </div>
 
   $if footer:
-    <hr />
-    $:footer
+    <div class="list-books__note">
+      $:sanitize(format(footer))
+    </div>
 </li>

static/css/legacy.less

@@ -1348,7 +1348,6 @@ ul.list-books {
     .sri__main {
       display: flex;
       flex-direction: column;
-      height: 100%;
     }
 
     .bookcover {
@@ -1380,6 +1379,22 @@ ul.list-books {
   }
 }
 
+.list-books__note {
+  overflow: hidden;
+  padding-top: 8px;
+  margin-top: 4px;
+  border-top: @border-divider;
+  line-height: @line-height-blurb;
+  display: -webkit-box;
+  -webkit-line-clamp: 6;
+  line-clamp: 6;
+  -webkit-box-orient: vertical;
+}
+
+.list-books__note p {
+  margin-top: 0;
+}
+
 div.pop {
   // openlibrary/templates/covers/add.html
   &Alert {

static/css/less/line-heights.less

@@ -29,6 +29,7 @@ Design approach to Line Heights:
 
 @line-height-body: @line-height-normal; // paragraphs, default text
 @line-height-meta: @line-height-snug; // bylines, counts, timestamps, secondary text (search cards)
+@line-height-blurb: @line-height-snug; // short snippet, often in narrow containers (list item notes in grid)
 
 @line-height-list: @line-height-snug; // multi-line lists of links/subjects (subject pages)
 @line-height-table: @line-height-snug; // edition detail grids / data tables