#9 - Bug: AmountDisplay renders div inside p — invalid DOM nesting - code/yieldomega

Brouie commented

2026-03-31 05:50:56 +00:00

(Migrated from gitlab.com)

TimeCurvePage: AmountDisplay.tsx line 21 renders a div inside a p element. React warns 'In HTML, div cannot be a descendant of p'. Will cause hydration errors in SSR. Visible in console on every page load.

Found on v1.4.0, local Anvil stack, commit aaa52c9.

TimeCurvePage: AmountDisplay.tsx line 21 renders a div inside a p element. React warns 'In HTML, div cannot be a descendant of p'. Will cause hydration errors in SSR. Visible in console on every page load. Found on v1.4.0, local Anvil stack, commit aaa52c9.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-04-01 01:47:32 +00:00

Brouie commented

2026-04-01 06:11:30 +00:00

(Migrated from gitlab.com)

still reproducing on d9987ca. console shows 'In HTML, div cannot be a descendant of p' at AmountDisplay.tsx:21, triggered from TimeCurvePage.tsx:1142. AmountDisplay still renders div.amount-triple > div.amount-triple__row inside a p element. the commit says span wrappers but the DOM nesting violation persists.

still reproducing on d9987ca. console shows 'In HTML, div cannot be a descendant of p' at AmountDisplay.tsx:21, triggered from TimeCurvePage.tsx:1142. AmountDisplay still renders div.amount-triple > div.amount-triple__row inside a p element. the commit says span wrappers but the DOM nesting violation persists.

PlasticDigits commented

2026-04-01 11:41:37 +00:00

(Migrated from gitlab.com)

mentioned in commit 5dd29b4dba

mentioned in commit 5dd29b4dbabc537a515275a13866bf7a9ebf1e20

PlasticDigits commented

2026-04-01 11:41:41 +00:00

(Migrated from gitlab.com)

Implemented follow-up on top of the earlier AmountDisplay span fix (d9987ca):

Shared layout: AmountTripleStack centralizes the raw / human / abbrev rows using only span elements so the block stays valid inside <p> and avoids SSR/hydration warnings (see #9).
UnixTimestampDisplay: switched from div rows to the same stack (was the remaining block-level duplicate of the triple pattern).
Regression: frontend/src/components/AmountDisplay.test.ts SSR-renders both components inside <p> and asserts the markup does not introduce <div> under the paragraph.

Pushed: 5dd29b4 on main. @brouie could you confirm the console is clean on TimeCurve (especially Podium pool where AmountDisplay sits in a <p>)?

pnpm test + pnpm run build pass in frontend/.

Implemented follow-up on top of the earlier `AmountDisplay` span fix (d9987ca): - **Shared layout:** `AmountTripleStack` centralizes the raw / human / abbrev rows using only `span` elements so the block stays valid inside `<p>` and avoids SSR/hydration warnings (see #9). - **UnixTimestampDisplay:** switched from `div` rows to the same stack (was the remaining block-level duplicate of the triple pattern). - **Regression:** `frontend/src/components/AmountDisplay.test.ts` SSR-renders both components inside `<p>` and asserts the markup does not introduce `<div>` under the paragraph. Pushed: **5dd29b4** on `main`. @brouie could you confirm the console is clean on TimeCurve (especially **Podium pool** where `AmountDisplay` sits in a `<p>`)? `pnpm test` + `pnpm run build` pass in `frontend/`.

Brouie commented

2026-04-02 05:58:12 +00:00

(Migrated from gitlab.com)

still reproducing on 44138d7. console shows 'div cannot be a descendant of p' at AmountDisplay. stack trace: AmountDisplay renders div.amount-triple > div.amount-triple__row inside a p element on TimeCurvePage. the AmountTripleStack component was added but AmountDisplay itself still uses divs -- looks like AmountDisplay.tsx needs to use spans/AmountTripleStack instead of divs when rendered inside a p context.

still reproducing on 44138d7. console shows 'div cannot be a descendant of p' at AmountDisplay. stack trace: AmountDisplay renders div.amount-triple > div.amount-triple__row inside a p element on TimeCurvePage. the AmountTripleStack component was added but AmountDisplay itself still uses divs -- looks like AmountDisplay.tsx needs to use spans/AmountTripleStack instead of divs when rendered inside a p context.

Brouie commented

2026-04-03 00:03:14 +00:00

(Migrated from gitlab.com)

still reproducing on 254999d. same console warning: div.amount-triple > div.amount-triple__row inside p on TimeCurvePage. AmountDisplay still uses divs. this issue was closed but the fix didnt land -- should reopen.

still reproducing on 254999d. same console warning: div.amount-triple > div.amount-triple__row inside p on TimeCurvePage. AmountDisplay still uses divs. this issue was closed but the fix didnt land -- should reopen.

Brouie commented

2026-04-04 04:19:05 +00:00

(Migrated from gitlab.com)

re-checked on 254999d (clean rebuild). no 'div cannot be a descendant of p' console warning on TimeCurvePage anymore. the AmountTripleStack span fix landed. confirmed fixed.

re-checked on 254999d (clean rebuild). no 'div cannot be a descendant of p' console warning on TimeCurvePage anymore. the AmountTripleStack span fix landed. confirmed fixed.

Brouie commented

2026-04-21 07:34:45 +00:00

(Migrated from gitlab.com)

mentioned in issue #38

PlasticDigits commented

2026-06-25 20:07:24 +00:00

(Migrated from gitlab.com)

mentioned in issue #349

PlasticDigits commented

2026-06-25 20:07:50 +00:00

(Migrated from gitlab.com)

mentioned in issue #342

Rows
Columns

Bug: AmountDisplay renders div inside p — invalid DOM nesting #9