Ingredients Database

Current Layout (Single Column List)

The existing design - items stretch full width, wasting horizontal space on desktop.

Onion

Base: count | Category: produce | Pack: 1

Milk (Pint)

Base: pint | Category: dairy | Pack: 1

Lazy Garlic

Base: g | Category: convenience | Pack: jar (200g)

Ground Cumin

Base: g | Category: spices | Pack: jar (40g)

Chicken Breast

Base: g | Category: meat | Pack: 500g

Issues

Wastes horizontal space on desktop
Long scrolling with 500+ items
No visual category grouping
Hard to find specific ingredients

Works Well For

Mobile (full width is fine)
Simple implementation

Option A: Category Accordion

Ingredients grouped by category in collapsible sections. Click headers to expand.

Ingredients Database

Produce 87

Onion

Carrot

Potato

Broccoli

Dairy 34

Milk (Pint)

Butter

Cheddar Cheese

Spices & Seasonings 62

Ground Cumin

Paprika

Meat & Poultry 45

Chicken Breast

Convenience / Lazy 18

Lazy Garlic

Ginger Paste

Pros

Clear category organization
Reduces visual overwhelm
Shows item counts per category
Familiar UI pattern

Cons

Requires clicks to expand sections
Can't see all items at once
Still single-column within sections

Option B: Two-Column Cards with Category Pills

Compact cards in a responsive grid, each showing a colored category pill.

Ingredients Database

Onion

Produce

Milk (Pint)

Dairy

Lazy Garlic

Convenience

Ground Cumin

Spices

Chicken Breast

Meat

Plain Flour

Baking

Carrot

Produce

Double Cream

Dairy

Pros

Uses horizontal space efficiently
Visual category indicators
Compact and scannable
Responsive (1 col on mobile)

Cons

Still lots of scrolling with 500+ items
Less detail visible per item
No filtering mechanism shown

Option C: Sidebar Category Filter

Fixed sidebar with category checkboxes, main area shows filtered cards.

Ingredients Database

Onion

Produce

Milk (Pint)

Dairy

Ground Cumin

Spices

Carrot

Produce

Double Cream

Dairy

Paprika

Spices

Pros

Powerful multi-category filtering
Familiar desktop pattern
Shows counts per category
Efficient use of space

Cons

Sidebar takes space on narrower screens
Hidden on mobile (needs alternative)
More complex to implement

Option D: Category Chips + Grid (Recommended)

Horizontal scrolling category chips at top (matching existing app style), with two-column grid below.

Ingredients Database

Onion

Produce

Milk (Pint)

Dairy

Lazy Garlic

Convenience

Ground Cumin

Spices

Chicken Breast

Meat

Plain Flour

Baking

Fish Sauce

World

Frozen Peas

Frozen

Pros

Matches existing app style (meal filters)
Mobile-friendly (chips scroll)
Quick one-click filtering
Compact grid uses space well
Shows item counts on chips

Cons

Only one category at a time
May need "All" to see everything

Ingredients Database - Layout Options

Current Layout (Single Column List)

Ingredients Database

Issues

Works Well For

Option A: Category Accordion

Ingredients Database

Pros

Cons

Option B: Two-Column Cards with Category Pills

Ingredients Database

Onion

Milk (Pint)

Lazy Garlic

Ground Cumin

Chicken Breast

Plain Flour

Carrot

Double Cream

Pros

Cons

Option C: Sidebar Category Filter

Ingredients Database

Filter by Category

Onion

Milk (Pint)

Ground Cumin

Carrot

Double Cream

Paprika

Pros

Cons

Option D: Category Chips + Grid (Recommended)

Ingredients Database

Onion

Milk (Pint)

Lazy Garlic

Ground Cumin

Chicken Breast

Plain Flour

Fish Sauce

Frozen Peas

Pros

Cons