prefersReducedMotion is computed with a bare window.matchMedia('(prefers-reduced-motion: reduce)').matches read directly in the render body, with no change event listener and no re-render trigger. If the user toggles the OS-level reduced-motion setting while the app is open (common on macOS/Windows via a quick-settings toggle, or during a screen-recording/demo), the "Read more"/"Show less" max-height transition on long messages won't pick up the new preference until the whole component remounts (e.g. navigating away and back).
How to trigger
Open a room with a long, collapsed message; toggle "Reduce motion" in OS settings without reloading the tab; expand/collapse the message — the transition still animates (or still doesn't), reflecting the value read at first render.
Suggested fix
Use the existing useReducedMotion hook (src/app/hooks/useReducedMotion.ts, already used elsewhere in the Lotus codebase) instead of an inline matchMedia().matches snapshot, so this component reacts live like the rest of the app.
Filed from the September 2026 client audit (branch lotus @ 4bea4895).
**Severity:** low · **Type:** a11y · **Confidence:** high
**Location:** `src/app/components/message/MsgTypeRenderers.tsx:65-66`
### Problem
`prefersReducedMotion` is computed with a bare `window.matchMedia('(prefers-reduced-motion: reduce)').matches` read directly in the render body, with no `change` event listener and no re-render trigger. If the user toggles the OS-level reduced-motion setting while the app is open (common on macOS/Windows via a quick-settings toggle, or during a screen-recording/demo), the "Read more"/"Show less" `max-height` transition on long messages won't pick up the new preference until the whole component remounts (e.g. navigating away and back).
### How to trigger
Open a room with a long, collapsed message; toggle "Reduce motion" in OS settings without reloading the tab; expand/collapse the message — the transition still animates (or still doesn't), reflecting the value read at first render.
### Suggested fix
Use the existing `useReducedMotion` hook (`src/app/hooks/useReducedMotion.ts`, already used elsewhere in the Lotus codebase) instead of an inline `matchMedia().matches` snapshot, so this component reacts live like the rest of the app.
---
_Filed from the September 2026 client audit (branch `lotus` @ 4bea4895)._
jared
added this to the Audit 2026-09 · Medium & Low milestone 2026-09-12 01:51:34 -04:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Severity: low · Type: a11y · Confidence: high
Location:
src/app/components/message/MsgTypeRenderers.tsx:65-66Problem
prefersReducedMotionis computed with a barewindow.matchMedia('(prefers-reduced-motion: reduce)').matchesread directly in the render body, with nochangeevent listener and no re-render trigger. If the user toggles the OS-level reduced-motion setting while the app is open (common on macOS/Windows via a quick-settings toggle, or during a screen-recording/demo), the "Read more"/"Show less"max-heighttransition on long messages won't pick up the new preference until the whole component remounts (e.g. navigating away and back).How to trigger
Open a room with a long, collapsed message; toggle "Reduce motion" in OS settings without reloading the tab; expand/collapse the message — the transition still animates (or still doesn't), reflecting the value read at first render.
Suggested fix
Use the existing
useReducedMotionhook (src/app/hooks/useReducedMotion.ts, already used elsewhere in the Lotus codebase) instead of an inlinematchMedia().matchessnapshot, so this component reacts live like the rest of the app.Filed from the September 2026 client audit (branch
lotus@4bea4895).