feat: implement responsive column-based styling for all thumbnail cards #9

Merged

pkartch merged 11 commits from feature/cookbook-pagination into main 2026-01-20 04:05:03 +00:00

Conversation 0 Commits 11 Files Changed 7 +1013 -96

pkartch commented 2026-01-20 03:57:20 +00:00

Owner

Copy Link

Summary

This PR implements consistent responsive styling across all recipe and cookbook thumbnail displays with column-specific font sizes and description visibility rules to prevent text cutoff and improve visual consistency.

Key Changes

Responsive Font Sizing:

• Column 3: Larger fonts (0.95rem title, 0.8rem desc, 0.75rem meta) for better readability
• Column 5: Medium fonts (0.85rem title, 0.75rem desc, 0.7rem meta)
• Column 7-9: Smallest fonts with descriptions hidden to prevent cutoff

Styling Consistency:

• Unified card styling across all pages (1px border, 8px radius)
• Fixed text truncation using -webkit-line-clamp
• Applied responsive patterns to all 7 thumbnail display locations

Pages Updated:

• Recipe List (My Recipes section)
• Cookbooks page (Recent Recipes section)
• Cookbooks page (Main cookbook grid)
• Cookbook Detail (Recipes section)
• Cookbook Detail (Nested cookbooks section)

Documentation:

• Added comprehensive documentation in CLAUDE.md listing all thumbnail display locations
• Documented responsive styling patterns for future consistency

Files Changed

• CLAUDE.md - Added UI Design System documentation
• packages/web/src/pages/RecipeList.tsx - Applied responsive grid classes
• packages/web/src/pages/Cookbooks.tsx - Updated with responsive patterns
• packages/web/src/pages/CookbookDetail.tsx - Applied to recipes and nested cookbooks
• packages/web/src/styles/RecipeList.css - Added column-specific styles
• packages/web/src/styles/Cookbooks.css - Comprehensive responsive updates
• packages/web/src/styles/CookbookDetail.css - Responsive styling for both grids

Testing

• ✅ Unit tests: 371 API tests passed, 27 web tests passed
• ✅ Visual testing: Verified on localhost across 3, 5, 7, and 9 column layouts
• ✅ No regressions in existing functionality
• ℹ️ E2E tests skipped (port conflict with running dev server)

Visual Impact

Before:

• Text cutoff on Chinese Steamed Pork Buns description
• Inconsistent font sizes across column layouts
• Blue bordered boxes breaking visual consistency

After:

• No text cutoff at any column count
• Smooth responsive scaling from 3 to 9 columns
• Clean, consistent card styling across all pages
• Descriptions hidden at 7+ columns for compact display

Test Plan

• Verify cards display correctly at 3, 5, 7, and 9 columns
• Confirm no text cutoff in any layout
• Check responsive behavior on Recent Recipes
• Verify nested cookbook cards scale properly
• Ensure main cookbook grid responds correctly
• Test Recipe List page with all column counts

🤖 Generated with Claude Code

## Summary This PR implements consistent responsive styling across all recipe and cookbook thumbnail displays with column-specific font sizes and description visibility rules to prevent text cutoff and improve visual consistency. ### Key Changes **Responsive Font Sizing:** - Column 3: Larger fonts (0.95rem title, 0.8rem desc, 0.75rem meta) for better readability - Column 5: Medium fonts (0.85rem title, 0.75rem desc, 0.7rem meta) - Column 7-9: Smallest fonts with descriptions hidden to prevent cutoff **Styling Consistency:** - Unified card styling across all pages (1px border, 8px radius) - Fixed text truncation using `-webkit-line-clamp` - Applied responsive patterns to all 7 thumbnail display locations **Pages Updated:** - Recipe List (My Recipes section) - Cookbooks page (Recent Recipes section) - Cookbooks page (Main cookbook grid) - Cookbook Detail (Recipes section) - Cookbook Detail (Nested cookbooks section) **Documentation:** - Added comprehensive documentation in CLAUDE.md listing all thumbnail display locations - Documented responsive styling patterns for future consistency ### Files Changed - `CLAUDE.md` - Added UI Design System documentation - `packages/web/src/pages/RecipeList.tsx` - Applied responsive grid classes - `packages/web/src/pages/Cookbooks.tsx` - Updated with responsive patterns - `packages/web/src/pages/CookbookDetail.tsx` - Applied to recipes and nested cookbooks - `packages/web/src/styles/RecipeList.css` - Added column-specific styles - `packages/web/src/styles/Cookbooks.css` - Comprehensive responsive updates - `packages/web/src/styles/CookbookDetail.css` - Responsive styling for both grids ### Testing - ✅ Unit tests: 371 API tests passed, 27 web tests passed - ✅ Visual testing: Verified on localhost across 3, 5, 7, and 9 column layouts - ✅ No regressions in existing functionality - ℹ️ E2E tests skipped (port conflict with running dev server) ### Visual Impact **Before:** - Text cutoff on Chinese Steamed Pork Buns description - Inconsistent font sizes across column layouts - Blue bordered boxes breaking visual consistency **After:** - No text cutoff at any column count - Smooth responsive scaling from 3 to 9 columns - Clean, consistent card styling across all pages - Descriptions hidden at 7+ columns for compact display ## Test Plan - [x] Verify cards display correctly at 3, 5, 7, and 9 columns - [x] Confirm no text cutoff in any layout - [x] Check responsive behavior on Recent Recipes - [x] Verify nested cookbook cards scale properly - [x] Ensure main cookbook grid responds correctly - [x] Test Recipe List page with all column counts 🤖 Generated with [Claude Code](https://claude.com/claude-code)

pkartch added 11 commits 2026-01-20 03:57:21 +00:00

feat: add pagination and column controls to cookbook detail page ... be98d20713

- 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
- Match UI/UX of All Recipes page

feat: add pagination and column controls to My Cookbooks page ... 70c9f8b751

- 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

fix: improve card sizing consistency across all pages ... 4ce62d5d3e

- 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>

fix: make cookbook cards square and more compact ... 4633f7c0cc

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>

fix: make cookbook cards truly square with aggressive sizing ... 41789fee80

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>

fix: restore square aspect ratio for recipe cards ... 822dd036d4

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>

fix: add grid layout for nested cookbooks in cookbook detail ... 766307050c

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>

feat: make nested cookbooks responsive and redesign compact toolbar UI ... 33a857c456

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>

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

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>

feat: unify all card styling to match working RecipeList pattern ... a20dfd848c

Using RecipeList.css as the gold standard, applied consistent styling
across ALL cookbook and recipe card locations in Basil.

## Changes Summary

All cards now use RecipeList.css pattern:
- aspect-ratio: 1 / 1 (square cards)
- Image: height: 60% (not aspect-ratio 16/9)
- Padding: 0.5rem (not 1.25rem)
- Title: 0.75rem, 2-line clamp
- Description: 0.65rem, 1-line clamp
- Meta/stats: 0.6rem
- Tags: 0.55-0.6rem with minimal padding

## Files Updated

### CookbookDetail.css
**Recipes section:**
- Title: 0.9rem → 0.75rem, single-line → 2-line clamp
- Description: 0.75rem → 0.65rem
- Meta: 0.7rem → 0.6rem
- Tags: 0.65rem → 0.55rem with smaller padding

**Nested/included cookbooks section:**
- Title: 0.9rem → 0.75rem, nowrap → 2-line clamp
- Stats: 0.7rem → 0.6rem
- Cover placeholder: 2.5rem icon
- Padding: 0.5rem

### Cookbooks.css
**Main cookbook cards:**
- Title: 0.9rem → 0.75rem, nowrap → 2-line clamp
- Stats: 0.7rem → 0.6rem
- Cover: height 50%, 2.5rem icon
- Padding: 0.5rem

**Recent recipes section:**
- Card: height: 100% → aspect-ratio: 1/1
- Image: aspect-ratio: 16/9 → height: 60%
- Placeholder icon: 4rem → 3rem
- Padding: 1.25rem → 0.5rem
- Title: 1.2rem → 0.75rem
- Description: 0.9rem → 0.65rem, 2-line → 1-line clamp
- Meta: 0.85rem → 0.6rem

## Result

All cookbook and recipe displays now have:
✅ Consistent square cards across all column counts (3, 5, 7, 9)
✅ No text cutoff - all titles fit within 2 lines
✅ Proper text scaling at all column counts
✅ Same visual appearance as working RecipeList page

## Locations Fixed

1. All Recipes page (/recipes) - Already working ✅
2. My Cookbooks page (/cookbooks) - Fixed ✅
3. Cookbook Detail: Nested cookbooks - Fixed ✅
4. Cookbook Detail: Recipes section - Fixed ✅

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

feat: implement responsive column-based styling for all thumbnail cards ... 0e611c379e

Implemented consistent responsive styling across all recipe and cookbook thumbnail displays
with column-specific font sizes and description visibility rules.

Changes:
- Added responsive font sizing for 3, 5, 7, and 9 column layouts
- Hide descriptions at 7+ columns to prevent text cutoff
- Show 2-line descriptions for 3 and 5 columns with proper truncation
- Applied consistent card styling (1px border, 8px radius) across all pages
- Updated RecipeList, Cookbooks, and CookbookDetail pages
- Documented all 7 thumbnail display locations in CLAUDE.md

Styling rules:
- Column 3: Larger fonts (0.95rem title, 0.8rem desc, 0.75rem meta)
- Column 5: Medium fonts (0.85rem title, 0.75rem desc, 0.7rem meta)
- Column 7-9: Smallest fonts, descriptions hidden

Pages affected:
- Recipe List (My Recipes)
- Cookbooks page (Recent Recipes section)
- Cookbooks page (Main grid)
- Cookbook Detail (Recipes section)
- Cookbook Detail (Nested cookbooks)

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

pkartch merged commit 7a02017c69 into main 2026-01-20 04:05:03 +00:00

pkartch deleted branch feature/cookbook-pagination 2026-01-20 04:05:03 +00:00

pkartch referenced this issue from a commit 2026-01-20 04:05:03 +00:00

Merge pull request 'feat: implement responsive column-based styling for all thumbnail cards' (#9) from feature/cookbook-pagination into main

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

pkartch

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: pkartch/basil#9