LotusGuild/cinny
3
0
Fork 0
Code Issues 27 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Invalid HTML nesting in Settings: blocks inside the tile description's <p> (React warnings on every Settings page) #291

New Issue
Closed
opened 2026-10-04 19:50:22 -04:00 by jared · 2 comments
jared commented 2026-10-04 19:50:22 -04:00
Owner
Copy Link
Copy Source

SettingTile's description renders inside a <Text> (<p>). Several Lotus tiles pass <Box>/<Text> blocks into it. That's invalid HTML (<div>/<p> inside <p>), and React logs In HTML, <p> cannot be a descendant of <p> about four times per page in development.

Found with a DOM scan:

  • General: URL Preview in Encrypted Rooms (the badge), Storage usage, Noise Suppression.
  • Account: Status Message, Pronouns, Timezone, Avatar Decoration.
  • Room Settings: Call Permissions and Call Quality Caps (src/app/features/common-settings/general/RoomQuality.tsx:119,155).

Also seen: A props object containing a "key" prop is being spread into JSX when opening Jump to Time and Invite.

Fix: let SettingTile accept a ReactNode description rendered in a <div> (or Text as="div"), and stop spreading key. Related: #278 (a11y findings), #271 (Noise Suppression text size).

Also (found in round 3): sending any image logs Cannot update a component (TauriDesktopFeatures) while rendering a different component (UploadCardRenderer). UploadCardRenderer calls startUpload() during render (src/app/components/upload-card/UploadCardRenderer.tsx:313-315, an upstream pattern). Since the desktop taskbar-progress hook (useTauriTaskbarProgress, cinny-desktop #10) subscribes to the upload atoms, that render-time state change now updates another component. Move startUpload() into a useEffect.

Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny 30e2dbcd, cinny-desktop 8f67ec7, element-call 3b0050e8.

`SettingTile`'s `description` renders inside a `<Text>` (`<p>`). Several Lotus tiles pass `<Box>`/`<Text>` blocks into it. That's invalid HTML (`<div>`/`<p>` inside `<p>`), and React logs `In HTML, <p> cannot be a descendant of <p>` about four times per page in development. Found with a DOM scan: - **General:** URL Preview in Encrypted Rooms (the badge), Storage usage, Noise Suppression. - **Account:** Status Message, Pronouns, Timezone, Avatar Decoration. - **Room Settings:** Call Permissions and Call Quality Caps (src/app/features/common-settings/general/RoomQuality.tsx:119,155). Also seen: `A props object containing a "key" prop is being spread into JSX` when opening **Jump to Time** and **Invite**. **Fix:** let `SettingTile` accept a `ReactNode` description rendered in a `<div>` (or `Text as="div"`), and stop spreading `key`. Related: #278 (a11y findings), #271 (Noise Suppression text size). **Also (found in round 3):** sending any image logs `Cannot update a component (TauriDesktopFeatures) while rendering a different component (UploadCardRenderer)`. `UploadCardRenderer` calls `startUpload()` during render (src/app/components/upload-card/UploadCardRenderer.tsx:313-315, an upstream pattern). Since the desktop taskbar-progress hook (`useTauriTaskbarProgress`, cinny-desktop #10) subscribes to the upload atoms, that render-time state change now updates another component. Move `startUpload()` into a `useEffect`. --- _Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny `30e2dbcd`, cinny-desktop `8f67ec7`, element-call `3b0050e8`._
jared added the priority: lowtech-debtarea: settings labels 2026-10-04 19:50:22 -04:00
jared commented 2026-10-18 00:57:30 -04:00
Author
Owner
Copy Link
Copy Source

Re-checked on current lotus (dev build, React warnings on): opening Jump to Time and Invite from the room menu logs no "key" prop is being spread into JSX warning any more, so that part no longer reproduces.

The rest is handled in #402:

  • the tile description is now a <div>, and the DOM scan finds 0 invalid nestings on every Settings page;
  • startUpload() now runs from an effect.

#402 says "Refs", so this can be closed once it merges.

🤖 Claude Code

Re-checked on current `lotus` (dev build, React warnings on): opening **Jump to Time** and **Invite** from the room menu logs **no** `"key" prop is being spread into JSX` warning any more, so that part no longer reproduces. The rest is handled in #402: - the tile description is now a `<div>`, and the DOM scan finds 0 invalid nestings on every Settings page; - `startUpload()` now runs from an effect. #402 says "Refs", so this can be closed once it merges. 🤖 Claude Code
jared commented 2026-10-19 12:16:09 -04:00
Author
Owner
Copy Link
Copy Source

Done: #402 (setting-tile description is a <div>; 0 invalid nestings on every Settings page; startUpload() runs in an effect). The key-spread warning no longer reproduces (see above).

🤖 Claude Code

Done: #402 (setting-tile description is a `<div>`; 0 invalid nestings on every Settings page; `startUpload()` runs in an effect). The `key`-spread warning no longer reproduces (see above). 🤖 Claude Code
jared closed this issue 2026-10-19 12:16:09 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
a11y
Accessibility: keyboard, screen reader, contrast, motion
 area: appearance
Client area: appearance
 area: auth-session
Client area: auth-session
 area: build-ci
Client area: build-ci
 area: calls
Client area: calls
 area: desktop
Client area: desktop
 area: media
Client area: media
 area: messaging
Client area: messaging
 area: mobile
Client area: mobile
 area: moderation
Client area: moderation
 area: navigation
Client area: navigation
 area: notifications
Client area: notifications
 area: settings
Client area: settings
 area: threads
Client area: threads
 bug
Something is not working
 dependencies
Third-party package versions and advisories
 docs
README / LOTUS_* docs wrong or missing
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 needs-human-review
performance
Re-render storms, leaks, heavy work on hot paths
 planning
priority: critical
Data loss, security hole, or crash on a main path
 priority: high
Broken feature or serious usability problem
 priority: low
Minor issue or polish
 priority: medium
Wrong behaviour in an edge case or notable degradation
 qa
Manual QA: shipped, needs a human in a real environment
 question
More information is needed
 research
security
XSS, unsafe URLs, data leaks, auth/session
 tech-debt
Code health, dead code, fragile patterns
 ux
Usability or visual inconsistency
 wontfix
This won't be fixed
No labels area: settings priority: low tech-debt
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
cole (Cole Keller) jared (Jared Vititoe) nathan (Nathan Vititoe)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: LotusGuild/cinny#291