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.tsx — import "@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
- Remove the
@gfazioli/mantine-border-animate dependency from clients/web/package.json (and re-lock).
- Remove the
styles.css import from main.tsx.
- 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.
- 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.
Problem
The
@gfazioli/mantine-border-animatedependency emits a persistent React warning in the Inspector console on every page load:This warning originates inside the
BorderAnimatecomponent and clutters the console during development.Where it's used
clients/web/src/main.tsx—import "@gfazioli/mantine-border-animate/styles.css";clients/web/src/components/groups/ServerCard/ServerCard.tsx— wraps the serverCardin<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
@gfazioli/mantine-border-animatedependency fromclients/web/package.json(and re-lock).styles.cssimport frommain.tsx.BorderAnimatehighlight effect inServerCard.tsxwith a simple green border on the highlighted state instead of the animated border.highlightedprop.--inspector-*CSS custom property for the green color (add a token toApp.css :rootif none fits) — no raw hex /rgba()literals.Card(e.g. ahighlightedvariant insrc/theme/Card.ts) over a CSS class, per project React/Mantine conventions.w="100%"workaround comment/prop that only existed becauseBorderAnimate's wrapper wasdisplay:flex(verify card sizing still looks right without the wrapper).Acceptance criteria
@gfazioli/mantine-border-animatereferences remain in the codebase.forwardRefconsole warning is gone.validatepasses.