Skip to content

Visual nits — mobile AI pill overlap, dark home decoration, MCP page snippet overflow #303

Description

@Aliserag

T6 mobile/dark/a11y rerun flagged 3 small visual issues. None block release; bundling for tracking.

1. Mobile 'Ask Cadence AI' pill overlap

At 375px viewport, the floating 'Ask Cadence AI' pill (bottom-right, fixed-position) overlaps body content text. Visible across the docs and home pages.

Fix: add bottom padding to the page wrapper equal to the pill's vertical footprint, OR reduce the pill to icon-only on mobile (with full text on desktop).

2. Home page MorphingAscii decoration invisible in dark mode

The ASCII-art decoration on the home page is dark-on-dark in dark mode. Not breaking; the page renders fine without it visible. Probably wants the inverse-color treatment used by other dark-mode decorations.

3. MCP-server page <pre> snippet self-scroll overflow

/docs/ai-tools/mcp-server has long install snippets (e.g., claude mcp add cadence-mcp -- npx -y @outblock/cadence-mcp). The trailing characters scroll under the copy-button overlay (positioned absolute top-right of <pre>).

Fix: add right-padding to <pre> equal to copy-button width + buffer, OR move the copy button to a position that doesn't overlap content (top-right floating with margin offset).

Source

T6 a11y rerun report; T9 noted the MCP issue separately as a Lighthouse bp item.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions