ui: redesign notifications grid

static/css/style.css

@@ -1172,7 +1172,7 @@ a:visited {
 
 /* Notifications Page */
 .notifications-page {
-  max-width: 900px;
+  max-width: 1400px;
   margin: 0 auto;
   padding: var(--space-2xl) var(--space-xl);
 }
@@ -1201,49 +1201,57 @@ a:visited {
 }
 
 .notifications-list {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 12vw + 80px, 200px), 1fr));
   gap: var(--space-lg);
 }
 
 .notification-card {
-  display: flex;
-  gap: var(--space-lg);
   background: var(--surface);
   border: 1px solid var(--border);
-  padding: var(--space-lg);
   border-radius: 4px;
-  transition: border-color 0.15s;
+  overflow: hidden;
+  transition: border-color 0.15s, transform 0.15s;
+  display: flex;
+  flex-direction: column;
 }
 
 .notification-card:hover {
   border-color: var(--link);
+  transform: translateY(-2px);
 }
 
 .notification-image {
-  flex-shrink: 0;
-  width: var(--thumb-width);
+  aspect-ratio: 2/3;
+  background: var(--bg);
+  overflow: hidden;
+  display: block;
 }
 
 .notification-image img {
   width: 100%;
-  aspect-ratio: 2/3;
+  height: 100%;
   object-fit: cover;
-  border-radius: 4px;
 }
 
 .notification-content {
+  padding: var(--space-md);
   flex: 1;
-  min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .notification-title {
-  font-size: var(--text-md);
+  font-size: var(--text-sm);
   font-weight: 600;
   color: var(--text);
   text-decoration: none;
-  display: block;
   margin-bottom: var(--space-xs);
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .notification-title:hover {
@@ -1253,21 +1261,31 @@ a:visited {
 .notification-meta {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-sm);
-  font-size: var(--text-sm);
+  gap: var(--space-xs);
+  font-size: var(--text-xs);
   color: var(--text-muted);
-  margin-bottom: var(--space-md);
+  margin-top: auto;
+}
+
+.notification-meta span {
+  background: var(--surface-hover);
+  padding: 2px 6px;
+  border-radius: 3px;
 }
 
 .notification-broadcast {
-  color: var(--link);
+  color: var(--link) !important;
   font-weight: 600;
 }
 
 .notification-synopsis {
-  font-size: var(--text-sm);
-  line-height: 1.5;
+  font-size: var(--text-xs);
+  line-height: 1.4;
   color: var(--text-muted);
-  margin: 0;
+  margin: var(--space-xs) 0 0 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }