fixed pagination issues and thumbnail generation issues

app/static/style.css

@@ -329,17 +329,24 @@ header {
   gap: .25rem;
 }
 
+/* Tag chips (truncate long names nicely) */
 .tag-chip {
-  font: 12px/1.6 system-ui, sans-serif;
+  display: inline-block;             /* required for ellipsis */
+  max-width: clamp(8rem, 22vw, 14rem); /* responsive cap */
   padding: 2px 8px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.92);
+  background: rgba(255,255,255,0.92);
   color: #334155;
   text-decoration: none;
-  border: 1px solid rgba(199, 210, 254, 0.9);
-  white-space: nowrap;
+  border: 1px solid rgba(199,210,254,0.9);
+  white-space: nowrap;               /* single line */
+  overflow: hidden;                  /* hide overflow */
+  text-overflow: ellipsis;           /* … */
+  vertical-align: middle;
+  font: 12px/1.6 system-ui, sans-serif;
 }
-.tag-chip:hover { background: rgba(255, 255, 255, 1); }
+.tag-chip:hover { background: rgba(255,255,255,1); }
+
 
 .tag-editor { margin-top: .5rem; }
 .tag-form { margin-top: .4rem; display: flex; gap: .5rem; }
@@ -541,3 +548,28 @@ header {
 }
 .form-button:hover { background-color: #434190; }
 .form-footer-text { margin-top: 1rem; text-align: center; }
+
+/* Fixed-height, 2-line title area so all cards match height */
+.card-title {
+  /* reserve exactly two lines of space for the title */
+  line-height: 1.3;
+  min-height: calc(1.3em * 2);
+  max-height: calc(1.3em * 2);
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+}
+
+/* Multi-line clamp with ellipsis (where supported) */
+.card-title-text {
+  margin: 0;
+  font-size: 1.1rem;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;           /* clamp to 2 lines */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+  /* good fallbacks for very long single words / no spaces */
+  overflow-wrap: anywhere;          /* allows breaking long tokens */
+  word-break: break-word;
+}