fix(web): remove mantine-border-animate, use green highlight border (#1536)

* fix(web): remove mantine-border-animate, use green highlight border (#1535)

The @gfazioli/mantine-border-animate dependency emitted a persistent
React "forwardRef render functions accept exactly two parameters"
warning on every page load. Remove the dependency entirely and replace
the freshly-added card's animated border with a green border.

- Drop @gfazioli/mantine-border-animate from clients/web (package + lock)
  and remove its styles.css import from main.tsx.
- Add a `highlighted` variant to the Card theme that draws a 2px green
  border, driven by a new --inspector-highlight-border token in App.css.
- ServerCard now selects the variant (disabled > highlighted) instead of
  wrapping in BorderAnimate; the BorderAnimate flex-wrapper `w="100%"`
  workaround is no longer needed.
- Update ServerCard/ServerListScreen tests to assert the highlighted
  variant instead of the removed BorderAnimate DOM.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(web): drop redundant Card props on ServerCard (#1535)

ThemeCard.defaultProps already sets withBorder and padding="lg", so the
explicit props on ServerCard's <Card> were redundant. Addresses review
feedback on PR #1536.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* docs(web): note highlighted Card variant relies on inherited withBorder (#1535)

Addresses a maintainability flag from the PR #1536 re-review: the
highlighted variant only sets borderColor/borderWidth and depends on the
withBorder:true default, so make that coupling explicit in a comment.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cliff Hall 2026-06-27 17:04:25 -04:00 • committed by GitHub
commit 0b0bd40e5d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -291,6 +291,22 @@ describe("ServerCard", () => {
}
});
it("draws the green highlight-variant border when highlighted", () => {
const { container } = renderWithMantine(
<ServerCard {...baseProps} highlighted />,
);
expect(
container.querySelector('[data-variant="highlighted"]'),
).not.toBeNull();
});
it("does not draw the highlight border when not highlighted", () => {
const { container } = renderWithMantine(<ServerCard {...baseProps} />);
expect(
container.querySelector('[data-variant="highlighted"]'),
).toBeNull();
});
it("does not scroll when not highlighted", () => {
const scrollIntoView = vi.fn();
const orig = Element.prototype.scrollIntoView;