Viewport: -px
1. Bento Layout (auto-fit grid)
Test: Verifies width: 100%, max-width: 100%, justify-items: stretch
Expected: Cards should fill full width, no collapse, single column on mobile
📱 Mobile View Active - Should be single column
1
Card One
Should fill full track width
2
Card Two
Should fill full track width
3
Card Three
Should fill full track width
4
Card Four
Should fill full track width
2. Bento Gallery (auto-fill grid)
Test: Gallery layout with image optimization
Expected: Responsive grid, full width usage, mobile single column
📱 Mobile View Active - Should be single column
3. Landing Features Grid
Test: Feature cards layout from layout-wrappers
Expected: Full width behavior, no horizontal overflow
📱 Mobile View Active - Should be single column
F1
Feature One
Full width track
F2
Feature Two
Full width track
F3
Feature Three
Full width track
4. Genesis Blocks (ontology)
Test: Genesis blocks with auto-fit grid
Expected: Centered tracks, full width items, mobile single column
📱 Mobile View Active - Should be single column
GB1
Genesis Block 1
Width should fill track
GB2
Genesis Block 2
Width should fill track
GB3
Genesis Block 3
Width should fill track
5. Box-Sizing Verification
Test: Cards with heavy padding shouldn't overflow
Expected: Content stays within track bounds
📱 Mobile View Active - Should be single column
Heavy Padding Card
This card has clamp(1.25rem, 3vw, 2rem) padding.
Content should not overflow or squash.
Box-sizing: border-box ensures proper sizing.
Another Padded Card
Multiple paragraphs to test vertical spacing.
Should maintain width: 100% within track.
Test Summary
Breakpoints to test:
• 375px - Small mobile (iPhone SE)
• 414px - Large mobile (iPhone 12)
• 768px - Tablet portrait
• 1024px - Tablet landscape / small desktop
• 1440px - Desktop
• 1920px - Large desktop
What to verify:
✓ No width collapse on any viewport
✓ Cards fill full track width (justify-items: stretch)
✓ Single column below 768px
✓ No horizontal overflow
✓ Proper centering of grid tracks