tactility_apps/.claude/skills/tactility-app-development/references/black-bar-crop.md

v6 Black Bar Crop Fix + 15px Lift Correction — July 12 BibleVerse on .129 final 2142871

Symptom: Vision: "black bar on the top cropping the text" — Habakkuk screenshots 4539 bytes showed 44px dark bar #15151F COVER + border overlapping center column, cutting first line. Also "reduce text size a bit for this font" — Georgia Italic 26pt wider than Montserrat LARGE. Then "main text can be moved a bit up 30px, seems padding favoring empty space on top." → corrected "We sent the text 30px up, but I think it should had been 15".

Root cause header:

lv_obj_set_size(hb, LV_PCT(100), 44); bg #15151F COVER border 1 #232338
center_col lv_obj_center size 90%x80%
verse pad_all 6 font 26

Fix v6 final 15px lift:

1. Header transparent same root no border smaller:

size 36 not 44; bg #0E0E14 same as parent root was #15151F; bg_opa TRANSP was COVER; border 0 was 1; pad_ver 4 was 0

2. Ctrl bar also TRANSP editorial: bg #0E0E14 TRANSP border 0 was #15151F COVER + top border
3. Center shift + lift correction:

// was center
size 90%x82% // 80->82
align CENTER 0,8 // +8 down to clear statusbar
// then 30px up request -> 0,-22
// then correction 15px up -> 0,-7 = +8 base -15 = 15px up balanced final
// pad verse 4 not 6

Vision Zeph 1:3 after -7: "balanced now, optical center correct, prevents sitting on buttons, 1.5x padding above controls, no excessive top space" PASS. No black bar Hab 2:9 "No extra black bar overlapping, fully visible".

4. Georgia Italic down-tier wider than Montserrat:

Before: LARGE->26 DEFAULT->20 SMALL->16
After v6: LARGE->22 was 26, DEFAULT->18 was 20, SMALL->16, ultra <40c still 26 via resolve_verse_font_ultra
pads tighter: <40 6/20 not 10/28, <100 4/16 not 8/24, <200 3/14 not 6/20, <350 2/12 not 4/16, 350+ 1/8 not 2/12

5. Menu auto-show 10s + book anim: See immersive-ui.md and book-browser.md v6 final. Timer gotcha: t->user_data incomplete typedef error in SDK 0.8.0-dev → must use lv_timer_get_user_data(t) (exported 382/388). Verified .129 menu show 8683 bytes.

Verification final 2142871:

• Build 4.3M tactility.py build esp32s3 --local-sdk ok, ELF 0 missing
• Install .129: heap 46215-47591 free largest 20480 psram 4810396 stable, ss 5335 serif vs 3991 sans vs 8683 menu visible vs 6882 immersive
• Vision checks: Hab 2:9 no crop, Zeph 1:3 balanced 15px lift, menu chrome visible at 0.8s then hidden showing premium cinematic
• Screenshot rate-limit >2s between to avoid ConnectionResetError 54 heap spike from encoder

Lessons:

• Avoid opaque header on immersive — use root bg TRANSP so no crop when mistakenly visible
• When swapping Mont→Georgia reduce one tier — 26pt serif ~22pt sans visual
• Lift correction: base CENTER 0,8 too low empty top → 30px up → user corrected 15px up → -7 final, always confirm lift target in vision
• Timer incomplete typedef: use getter, not direct field
• Screenshot burst OOM — wait 2s+

See immersive-ui.md v6 final + pretty-font.md v6 final + book-browser.md v6 final. Beautiful per user final approval.