Skip to content

Remove @gfazioli/mantine-border-animate dependency, replace highlight with green border #1535

Description

@cliffhall

Problem

The @gfazioli/mantine-border-animate dependency emits a persistent React warning in the Inspector console on every page load:

forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?

This warning originates inside the BorderAnimate component and clutters the console during development.

Where it's used

  • clients/web/src/main.tsximport "@gfazioli/mantine-border-animate/styles.css";
  • clients/web/src/components/groups/ServerCard/ServerCard.tsx — wraps the server Card in <BorderAnimate show={highlighted} animate={highlighted} ...> to draw an animated border when a card is highlighted (e.g. scrolled-to / called out).
  • clients/web/package.json / package-lock.json — declared dependency ^2.0.3.

Proposed fix

  1. Remove the @gfazioli/mantine-border-animate dependency from clients/web/package.json (and re-lock).
  2. Remove the styles.css import from main.tsx.
  3. Replace the BorderAnimate highlight effect in ServerCard.tsx with a simple green border on the highlighted state instead of the animated border.
    • Drive it off the existing highlighted prop.
    • Use an --inspector-* CSS custom property for the green color (add a token to App.css :root if none fits) — no raw hex / rgba() literals.
    • Prefer a Mantine theme variant on Card (e.g. a highlighted variant in src/theme/Card.ts) over a CSS class, per project React/Mantine conventions.
  4. Drop the w="100%" workaround comment/prop that only existed because BorderAnimate's wrapper was display:flex (verify card sizing still looks right without the wrapper).

Acceptance criteria

  • No @gfazioli/mantine-border-animate references remain in the codebase.
  • The forwardRef console warning is gone.
  • Highlighting a server card shows a green border.
  • Tests/coverage updated for the new highlight behavior; validate passes.

Metadata

Metadata

Assignees

Labels

v2Issues and PRs for v2

Type

No type

Fields

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