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>
Nested Cookbooks Fix:
- Added dynamic gridStyle to .cookbooks-grid in CookbookDetail.tsx
- Removed hardcoded 5-column grid from CSS, now respects column selector
- Nested cookbooks now respond to column count changes (3, 5, 7, 9)
Toolbar UI Redesign (CookbookDetail.css & Cookbooks.css):
- Reduced toolbar padding from 1.5rem to 0.75rem 1rem
- Changed alignment from flex-end to center for cleaner layout
- Made buttons more compact:
- Reduced padding to 0.35rem 0.6rem (was 0.5rem 0.75rem)
- Reduced font size to 0.8rem (was 0.9rem)
- Reduced min-width to 2rem (was 2.5rem)
- Grouped buttons with subtle border styling instead of individual borders
- Reduced gaps between controls from 2rem/1.5rem to 1.5rem/1rem
- Made labels smaller and lighter weight (0.8rem, 500 weight)
- Updated page navigation with lighter borders and subtle hover states
- Changed colors to more subtle grays (#d0d0d0, #555) instead of bold green
- Reduced box-shadow for subtler appearance
- Added 1px border for better definition
Result: Consistent, compact, user-friendly controls across all recipe
and cookbook list pages.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Added proper grid styling for included/nested cookbooks:
- Added .cookbooks-grid with 5-column grid layout and 1.5rem gap
- Made .cookbook-card.nested explicitly square with aspect-ratio: 1/1
- Added flexbox display to nested cards for proper content layout
- Added responsive mobile styling (1 column on mobile)
This prevents nested cookbooks from displaying as huge squares
that don't respect column sizing.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Reverted recipe cards on All Recipes page back to square:
- Restored aspect-ratio: 1 / 1 on .recipe-card
- Changed image from aspect-ratio: 16/9 back to height: 60%
This ensures recipe cards match the square appearance of
cookbook cards and don't display as tall rectangles.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changes to force square aspect ratio:
- Reduced cover from 60% to 50% height
- Reduced icon from 4rem to 2.5rem
- Reduced padding from 0.75rem to 0.5rem
- Changed title from 2-line clamp to single line with nowrap
- Reduced title font from 1rem to 0.9rem
- Reduced recipe/cookbook count from 0.8rem to 0.7rem
- Added overflow:hidden to cookbook-info
- Hidden cookbook tags completely
- Styled cookbook-stats container for compact display
These aggressive reductions ensure all content fits within
the 1:1 aspect ratio without expanding the card vertically.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changes to cookbook cards:
- Set aspect-ratio: 1 / 1 on cards to maintain square shape
- Changed cover height from 16:9 ratio to 60% fixed height
- Hidden description to reduce card height
- Reduced padding from 1.25rem to 0.75rem
- Reduced title font from 1.3rem to 1rem
- Reduced recipe count font from 0.9rem to 0.8rem
This makes cookbook cards display as squares similar to recipe cards,
preventing them from becoming too tall.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Use flexbox layout with height: 100% for all cards
- Replace fixed heights with aspect-ratio: 16/9 for images
- Add text clamping (2 lines) for titles and descriptions
- Use margin-top: auto to push metadata to bottom
- Ensures cards maintain proportional box shapes
Files updated:
- Cookbooks.css: cookbook and recipe cards
- CookbookDetail.css: recipe cards
- RecipeList.css: recipe cards (removed 1:1 aspect ratio)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add pagination controls (12, 24, 48, All items per page)
- Add column count selector (3, 5, 7, 9 columns)
- Add prev/next page navigation
- Save preferences to localStorage
- Update URL params for page and limit
- Add responsive toolbar styling
- Show results count with pagination info
- Match UI/UX of All Recipes and Cookbook Detail pages
