fix: make nested cookbooks and recipes truly square with compact text

Nested Cookbook Cards:
- Reduced cover height to 50% and icon to 2.5rem
- Reduced padding to 0.5rem
- Made title single-line with nowrap (0.9rem font)
- Reduced stats font to 0.7rem
- Hidden description to save space
- Added overflow: hidden to prevent text spillover

Recipe Cards in Cookbook Detail:
- Changed from height: 100% to aspect-ratio: 1/1 for square shape
- Changed image from aspect-ratio 16/9 to height: 60%
- Reduced placeholder icon from 4rem to 3rem
- Reduced padding from 1.25rem to 0.5rem
- Made title single-line with nowrap (0.9rem font, was 1.2rem)
- Reduced description to 1 line clamp (0.75rem font, was 0.9rem)
- Reduced meta font to 0.7rem (was 0.85rem)
- Made tags smaller: 0.65rem font with reduced padding
- Added overflow: hidden to recipe-info

Result: Both nested cookbooks and recipes display as proper
squares with no text overflow, maintaining proportions across
all column settings (3, 5, 7, 9).

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

packages/web/src/styles/CookbookDetail.css

@@ -399,7 +399,7 @@
   transition: transform 0.2s, box-shadow 0.2s;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  aspect-ratio: 1 / 1;
 }
 
 .recipe-card:hover {
@@ -417,77 +417,76 @@
 
 .recipe-image {
   width: 100%;
-  aspect-ratio: 16 / 9;
+  height: 60%;
   object-fit: cover;
   flex-shrink: 0;
 }
 
 .recipe-image-placeholder {
   width: 100%;
-  aspect-ratio: 16 / 9;
+  height: 60%;
   background: linear-gradient(135deg, #ffb74d 0%, #ff9800 100%);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 4rem;
+  font-size: 3rem;
   flex-shrink: 0;
 }
 
 .recipe-info {
-  padding: 1.25rem;
+  padding: 0.5rem;
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0;
+  overflow: hidden;
 }
 
 .recipe-info h3 {
-  font-size: 1.2rem;
+  font-size: 0.9rem;
   color: #212121;
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 0.25rem 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  line-height: 1.3;
+  white-space: nowrap;
+  line-height: 1.2;
 }
 
 .recipe-info .description {
-  font-size: 0.9rem;
+  font-size: 0.75rem;
   color: #666;
-  margin: 0 0 0.75rem 0;
-  line-height: 1.4;
+  margin: 0 0 0.5rem 0;
+  line-height: 1.3;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   flex: 0 0 auto;
 }
 
 .recipe-meta {
   display: flex;
-  gap: 1rem;
-  font-size: 0.85rem;
+  gap: 0.5rem;
+  font-size: 0.7rem;
   color: #757575;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
   flex: 0 0 auto;
 }
 
 .recipe-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.25rem;
   margin-top: auto;
 }
 
 .recipe-tags .tag {
-  padding: 0.25rem 0.75rem;
+  padding: 0.15rem 0.5rem;
   background-color: #e8f5e9;
   color: #2e7d32;
-  border-radius: 12px;
-  font-size: 0.8rem;
+  border-radius: 10px;
+  font-size: 0.65rem;
   font-weight: 500;
 }
 
@@ -621,3 +620,34 @@
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   transform: translateY(-2px);
 }
+
+.cookbook-card.nested .cookbook-cover,
+.cookbook-card.nested .cookbook-cover-placeholder {
+  height: 50%;
+  font-size: 2.5rem;
+}
+
+.cookbook-card.nested .cookbook-info {
+  padding: 0.5rem;
+  overflow: hidden;
+}
+
+.cookbook-card.nested .cookbook-info h3 {
+  font-size: 0.9rem;
+  margin: 0 0 0.25rem 0;
+  white-space: nowrap;
+}
+
+.cookbook-card.nested .cookbook-info .description {
+  display: none;
+}
+
+.cookbook-card.nested .cookbook-stats {
+  margin-top: auto;
+  gap: 0.1rem;
+}
+
+.cookbook-card.nested .recipe-count,
+.cookbook-card.nested .cookbook-count {
+  font-size: 0.7rem;
+}