Help page "Steil Stitch" is a made-up name (likely meant "Stem Stitch") + FAQ accordion below it doesn't expand on click (same IntersectionObserver race as #104) #109

New issue

Closed

opened 2026-09-25 17:11:36 +00:00 by Mark · 0 comments

Mark commented

2026-09-25 17:11:36 +00:00

Owner

Bug: Help page "Steil Stitch" is a made-up name + every section on Help page uses the broken IntersectionObserver pattern (same shape as #104, NOT generalized)

Two findings on `src/pages/Help.tsx`

1. "Steil Stitch" is not a real embroidery stitch type

src/pages/Help.tsx:95 lists a stitch type:

{ name: 'Steil Stitch', bestFor: 'Very narrow satin columns, fine detail, small text', thread: 'Low' as const, Pattern: SteilPattern },

The description ("very narrow satin columns, fine detail, small text") matches Stem Stitch — a real embroidery technique commonly used for thin outlines and small detail work. "Steil" is not an English embroidery term. It looks like a typo for "Stem" (missing m) or a phonetic attempt at the German "steil" (steep) which isn't an embroidery term either.

The visual component at src/components/help/StitchPatterns.tsx:266-267 is also named SteilPattern:

/* --- Steil Stitch: narrow vertical satin --- */
export const SteilPattern = () => ( …

…and rendered as a "narrow vertical satin" pattern — which is exactly what a stem stitch looks like in SVG. The intent is clearly a stem stitch; the name was just misspelled.

Reproduction:

cd ~/Projects/Kimi_Agent_Brother_10_Digitizing_App && npm run dev
Open http://localhost:3000/help.
Scroll to "Stitch Types Explained".
Read the 9th entry: "Steil Stitch".

Expected: "Stem Stitch" (or a similarly legitimate embroidery term).
Actual: "Steil Stitch" — not a real term, will confuse any embroiderer reading the help docs.

2. Every section on Help page uses the broken IntersectionObserver pattern (10 occurrences in Help.tsx alone)

grep -nE 'animate=\{X?Trigger\.inView' src/pages/Help.tsx returns 10 hits — every section on Help page uses the broken pattern that #104 originally diagnosed:

Line	Section
Help.tsx:369	Hero title stagger
Help.tsx:452	Quick Start accordion items
Help.tsx:467	Quick Start accordion items
Help.tsx:494	Stitch Types header
Help.tsx:512	Stitch Types header
Help.tsx:547	Compatibility section
Help.tsx:562	Compatibility section
Help.tsx:596	Compatibility float card
Help.tsx:650	FAQ heading
Help.tsx:665	FAQ Accordion

All ten use the shape animate={someTrigger.inView ? 'visible' : 'hidden'} with useInView({ once: true, amount: 0.2 }) driving the trigger. If the IntersectionObserver doesn't fire when a section enters the viewport, the section stays in the "hidden" variant state at opacity: 0.

#104 only fixed Three Steps on Home. The same broken pattern was NOT generalized to Home (where every motion div now correctly uses whileInView) nor to Help. Help page is entirely broken by this race — a user landing on /help at scrollY=0 sees only the chrome; everything else is at opacity 0 until they scroll. Even after scrolling, the FAQ accordion doesn't expand because its parent motion.div stays hidden.

Reproduction:

npm run dev, navigate to http://localhost:3000/help.
At scrollY=0, observe only navbar + alert + headline visible. Quick Start cards, Stitch Types grid, Compatibility section, FAQ section are all invisible.
Click any FAQ question (e.g. "What image formats can I upload?").
Expected: accordion expands.
Actual: nothing — button stays [collapsed], no answer reveals.

Verified 2026-09-25: scroll-trigger via mcp__browseros__read (which scrolls the page internally) does NOT cause the FAQ accordion to become interactable. Question text is in DOM (extractable) but AccordionContent stays at opacity 0 because the motion.div parent is gated on faqTrigger.inView.

Suggested fix scope

The #104 fix shape worked. Generalize it.

Rename SteilPattern → StemPattern in src/components/help/StitchPatterns.tsx:266-267, src/pages/Help.tsx:21 (import), src/pages/Help.tsx:95 (label + Pattern reference). Confirm "Stem" is the intended stitch with the embroidery reference; if not, pick another legitimate name.
Apply the #104 fix to every remaining animate={X.inView ? ... : ...} instance in the codebase. That's 10 instances in src/pages/Help.tsx alone. Also sweep the rest of src/ for the same shape:

grep -rnE 'animate=\{[a-zA-Z]+\.inView' src/ --include='*.tsx' --include='*.ts'

For each instance, replace with per-element whileInView={{...}} + viewport={{ once: true, amount: 0.2 }} per the pattern that closed #104.

Add a regression test: mount Help.tsx in jsdom with a stubbed IntersectionObserver that fires isIntersecting: true immediately, assert every section's content is visible (opacity > 0), then click each FAQ trigger and assert the answer is revealed.

Labels

bug
usability
content-quality
triage-approved

Severity

Medium–High. "Steil Stitch" alone is a credibility-undermining typo on the educational surface. The IntersectionObserver race means the Help page — the place users go when they have questions — is functionally unusable on first paint; only the chrome and headline show. For an SMB-pro audience paying $49–399/mo, this is a critical support-path failure.

#104 (closed): Home 'Three Steps' — same inView ? 'visible' : 'hidden' pattern. Fix was applied locally to Three Steps but not generalized. The right follow-up was always to apply the same fix everywhere; this issue captures the rest of the surface area.

Filed 2026-09-25 by user-driven bughunt session.

## Bug: Help page "Steil Stitch" is a made-up name + every section on Help page uses the broken IntersectionObserver pattern (same shape as #104, NOT generalized) ### Two findings on `src/pages/Help.tsx` --- #### 1. "Steil Stitch" is not a real embroidery stitch type `src/pages/Help.tsx:95` lists a stitch type: ```ts { name: 'Steil Stitch', bestFor: 'Very narrow satin columns, fine detail, small text', thread: 'Low' as const, Pattern: SteilPattern }, ``` The description ("very narrow satin columns, fine detail, small text") matches **Stem Stitch** — a real embroidery technique commonly used for thin outlines and small detail work. "Steil" is not an English embroidery term. It looks like a typo for "Stem" (missing `m`) or a phonetic attempt at the German "steil" (steep) which isn't an embroidery term either. The visual component at `src/components/help/StitchPatterns.tsx:266-267` is also named `SteilPattern`: ```ts /* --- Steil Stitch: narrow vertical satin --- */ export const SteilPattern = () => ( … ``` …and rendered as a "narrow vertical satin" pattern — which is exactly what a stem stitch looks like in SVG. The intent is clearly a stem stitch; the name was just misspelled. **Reproduction:** 1. `cd ~/Projects/Kimi_Agent_Brother_10_Digitizing_App && npm run dev` 2. Open `http://localhost:3000/help`. 3. Scroll to "Stitch Types Explained". 4. Read the 9th entry: "Steil Stitch". **Expected:** "Stem Stitch" (or a similarly legitimate embroidery term). **Actual:** "Steil Stitch" — not a real term, will confuse any embroiderer reading the help docs. --- #### 2. Every section on Help page uses the broken IntersectionObserver pattern (10 occurrences in Help.tsx alone) `grep -nE 'animate=\{X?Trigger\.inView' src/pages/Help.tsx` returns **10 hits** — every section on Help page uses the broken pattern that #104 originally diagnosed: | Line | Section | |---|---| | Help.tsx:369 | Hero title stagger | | Help.tsx:452 | Quick Start accordion items | | Help.tsx:467 | Quick Start accordion items | | Help.tsx:494 | Stitch Types header | | Help.tsx:512 | Stitch Types header | | Help.tsx:547 | Compatibility section | | Help.tsx:562 | Compatibility section | | Help.tsx:596 | Compatibility float card | | Help.tsx:650 | FAQ heading | | Help.tsx:665 | FAQ Accordion | All ten use the shape `animate={someTrigger.inView ? 'visible' : 'hidden'}` with `useInView({ once: true, amount: 0.2 })` driving the trigger. If the IntersectionObserver doesn't fire when a section enters the viewport, the section stays in the "hidden" variant state at `opacity: 0`. **#104 only fixed Three Steps on Home.** The same broken pattern was NOT generalized to Home (where every motion div now correctly uses `whileInView`) nor to Help. **Help page is entirely broken by this race** — a user landing on /help at scrollY=0 sees only the chrome; everything else is at opacity 0 until they scroll. Even after scrolling, the FAQ accordion doesn't expand because its parent `motion.div` stays hidden. **Reproduction:** 1. `npm run dev`, navigate to `http://localhost:3000/help`. 2. At scrollY=0, observe only navbar + alert + headline visible. Quick Start cards, Stitch Types grid, Compatibility section, FAQ section are all invisible. 3. Click any FAQ question (e.g. "What image formats can I upload?"). 4. Expected: accordion expands. 5. Actual: nothing — button stays `[collapsed]`, no answer reveals. Verified 2026-09-25: scroll-trigger via `mcp__browseros__read` (which scrolls the page internally) does NOT cause the FAQ accordion to become interactable. Question text is in DOM (extractable) but AccordionContent stays at opacity 0 because the `motion.div` parent is gated on `faqTrigger.inView`. --- ### Suggested fix scope **The #104 fix shape worked. Generalize it.** 1. **Rename `SteilPattern` → `StemPattern`** in `src/components/help/StitchPatterns.tsx:266-267`, `src/pages/Help.tsx:21` (import), `src/pages/Help.tsx:95` (label + Pattern reference). Confirm "Stem" is the intended stitch with the embroidery reference; if not, pick another legitimate name. 2. **Apply the #104 fix to every remaining `animate={X.inView ? ... : ...}` instance in the codebase.** That's 10 instances in `src/pages/Help.tsx` alone. Also sweep the rest of `src/` for the same shape: ```bash grep -rnE 'animate=\{[a-zA-Z]+\.inView' src/ --include='*.tsx' --include='*.ts' ``` For each instance, replace with per-element `whileInView={{...}}` + `viewport={{ once: true, amount: 0.2 }}` per the pattern that closed #104. 3. **Add a regression test:** mount Help.tsx in jsdom with a stubbed IntersectionObserver that fires `isIntersecting: true` immediately, assert every section's content is visible (opacity > 0), then click each FAQ trigger and assert the answer is revealed. ### Labels - bug - usability - content-quality - triage-approved ### Severity **Medium–High.** "Steil Stitch" alone is a credibility-undermining typo on the educational surface. The IntersectionObserver race means the Help page — the place users go when they have questions — is functionally unusable on first paint; only the chrome and headline show. For an SMB-pro audience paying $49–399/mo, this is a critical support-path failure. ### Related - #104 (closed): Home 'Three Steps' — same `inView ? 'visible' : 'hidden'` pattern. Fix was applied locally to Three Steps but not generalized. The right follow-up was always to apply the same fix everywhere; this issue captures the rest of the surface area. --- Filed 2026-09-25 by user-driven bughunt session.