highlight/highlight
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 25, 2026
Elevated
Design risk in this codebase.
Verdict
The truncation logic itself is well built, checking real scroll height rather than faking it with line counts, but the interactive toggle sitting on top of that logic is a non-semantic Tag with a click handler and no keyboard path or ARIA state. The visual behavior is right; the control just isn't operable or legible for anyone not using a mouse.
Files Rams reviewed
frontend/src/pages/ErrorsV2/ErrorBody/components/AffectedUserCount/index.tsx
frontend/src/pages/ErrorsV2/ErrorBody/components/ErrorBodyText/index.tsx
frontend/src/pages/ErrorsV2/ErrorBody/components/ErrorObjectCount/index.tsx
frontend/src/pages/Graphing/components/ActionBar/index.tsx
frontend/src/pages/Graphing/components/GraphMenu/index.tsx
frontend/src/pages/Player/RightPlayerPanel/components/Tabs/index.tsx
frontend/src/pages/Alerts/components/AlertNotifyForm/AlertNotifyForm.tsx
frontend/src/pages/Graphing/components/BarChart.tsx
frontend/src/pages/Graphing/components/CreateDashboardModal.tsx
frontend/src/pages/Graphing/components/DashboardCard.tsx
frontend/src/pages/Graphing/components/DashboardSettingsModal.tsx
frontend/src/pages/Graphing/components/EmptyDashboardCallout.tsx
frontend/src/pages/Graphing/components/FunnelChart.tsx
frontend/src/pages/Graphing/components/LineChart.tsx
frontend/src/pages/Graphing/components/Panel.tsx
frontend/src/pages/Graphing/components/RunQueryButton.tsx
frontend/src/pages/Graphing/components/SqlEditor.tsx
frontend/src/pages/Graphing/components/Table.tsx
frontend/src/pages/Graphing/components/VariablesBar.tsx
frontend/src/pages/Graphing/components/VariablesModal.tsx
frontend/src/pages/IntegrationsPage/components/ClearbitIntegration/ClearbitIntegrationConfig.tsx
frontend/src/pages/IntegrationsPage/components/ClickUpIntegration/ClickUpIntegrationConfig.tsx
frontend/src/pages/IntegrationsPage/components/ClickUpIntegration/ClickUpListSelector.tsx
frontend/src/pages/IntegrationsPage/components/CloudflareIntegration/CloudflareIntegration.tsx
frontend/src/pages/IntegrationsPage/components/DiscordIntegration/DiscordIntegrationConfig.tsx
frontend/src/pages/IntegrationsPage/components/GitHubIntegration/GitHubIntegrationConfig.tsx
frontend/src/pages/IntegrationsPage/components/GitHubIntegration/GitHubRepoSelector.tsx
frontend/src/pages/IntegrationsPage/components/GitlabIntegration/GitlabIntegrationConfig.tsx
frontend/src/pages/IntegrationsPage/components/GitlabIntegration/GitlabProjectSelector.tsx
frontend/src/pages/IntegrationsPage/components/GitlabIntegration/utils.tsx
Accessibility
frontend/src/pages/ErrorsV2/ErrorBody/components/ErrorBodyText/index.tsx:40
Show more/less toggle is unreachable by keyboard users
The 'Show more'/'Show less' toggle in ErrorBodyText is a `Tag` component with an `onClick` handler, not a `button` or a focusable element with a keyboard handler. Tags render as generic elements with no native focus stop, no tab order, and no keydown listener, so pressing Tab or Enter does nothing here.
Why it matters
A keyboard-only or screen-reader user hits the truncated error body and has no way to expand it. The rest of the error content stays permanently clipped at 3 lines for that user, which is a hard lockout, not a minor friction.
Fix
Use a semantic button (or add role='button', tabIndex=0, and an onKeyDown handler) for any element that toggles state on click.
<Tag
onClick={() => setTruncated(!truncated)}
kind="secondary"
emphasis="medium"
shape="basic"
>
Show {truncated ? 'more' : 'less'}
</Tag><Tag
as="button"
type="button"
onClick={() => setTruncated(!truncated)}
kind="secondary"
emphasis="medium"
shape="basic"
>
Show {truncated ? 'more' : 'less'}
</Tag>Typography
Color
Spacing
Components
Motion
UX
Craft
Working well
- Truncation state is derived from an actual scrollHeight vs offsetHeight comparison in the useEffect, not a hardcoded line-count guess, so the 'Show more' control only ever appears when the text is genuinely clipped.
- The `Box` wrapping the toggle only renders when `truncateable` is true, keeping the layout free of a dead 'Show more' control when the error body already fits.
Scored July 25, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 9, 2026: 59/100. This rescore on v0.0.3: 59/100.
This page is an automated design review of highlight/highlight’s UI code: 30 files read against 291 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; confirmed criticals cap it — one at 59, two at 49, three or more at 39.
More design scores
Score your own repo.
Free on public repos, no account. The same engine that scored this page reads your UI code and mints a score page like this one.
Public repos only. The full engine reviews the UI code and mints a public score page — we email you the link too. Already-scored repos open instantly.
