engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Always show queue add button, add mobile usability rule to CLAUDE.md

Browse source 
Hover-only controls are unreachable on touch devices. Removed opacity:0
hover-reveal pattern from queue add button. Added MOBILE USABILITY
guideline to CLAUDE.md: all interactive elements must be always visible.
This commit is contained in:
russell@unturf.com 2026-02-08 11:41:50 -05:00
parent d1fbcf53cf
commit 7becbb94a1
2 changed files with 2 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
CLAUDE.md
View file

@ -181,6 +181,8 @@ Always use `uuid_str` when you need a string copy of the identifier. Models inhe
**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.
**MOBILE USABILITY**: Never use hover-only interactions (`:hover` to reveal controls, `opacity: 0` with hover reveal, etc.). Mobile/touch devices have no hover state — controls hidden behind hover are invisible and unreachable. All interactive elements (buttons, toggles, links) must be always visible and tappable. Design touch-first, then optionally enhance for desktop hover.
**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

5
make_post_sell/static/css/common.css
View file

@ -2895,11 +2895,6 @@ textarea {
display: grid;
place-items: center;
transition: background 0.15s, color 0.15s;
opacity: 0;
}
.related-content-row:hover .queue-add-btn {
opacity: 1;
}
.queue-add-btn:hover {