From fd33376cb726880411cf55751e7774054e8c69a2 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Sun, 8 Feb 2026 08:04:43 -0500 Subject: [PATCH] Document CSS media sizing rule: never width 100% with max-height --- CLAUDE.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CLAUDE.md b/CLAUDE.md index 1582ac9..98be060 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -179,6 +179,8 @@ Always use `uuid_str` when you need a string copy of the identifier. Models inhe **CSS LAYOUT REQUIREMENTS**: This project uses CSS Grid exclusively for layout. NEVER use Flexbox (flex) for layout. Always use CSS Grid properties for positioning and alignment. +**CSS MEDIA SIZING**: Never combine `width: 100%` with `max-height` on media elements (img, video). `width: 100%` forces the element to span the full container even when `max-height` constrains the rendered content, creating dead whitespace. Use `width: auto` + `max-width: 100%` + `max-height` instead — the element shrinks to match the actual content aspect ratio within both constraints. + **TESTING INTEGRITY**: NEVER skip, delete, or disable unit tests or integration tests when they break. When tests fail: 1. **FIX THE TESTS** - Update them to work with new functionality 2. **FIX THE CODE** - If the tests reveal actual bugs, fix the underlying issue