Enhance card hover interaction with elevation and smoother transitions

[ArhanAnsari]

What

Improves the hover interaction of cards in the card grid component by:

• Adding subtle elevation using translateY and box-shadow
• Introducing smooth transitions for better visual feedback
• Adding active state feedback for improved interaction feel

Why

This enhances the overall user experience by making cards feel more interactive and responsive, aligning with modern UI patterns.

Changes

• Applied hover and active styles to card elements using scoped global selectors
• Added GPU-friendly transform-based animation
• Included will-change for performance optimization
• No changes to business logic or component structure

Impact

• No breaking changes
• Purely visual enhancement
• Maintains backward compatibility

Testing

• Verified hover and active states in local development
• Confirmed no layout shifts or regressions

[greptile-apps]

Greptile Summary

This PR adds a hover/active lift animation to cardGrid.svelte by wrapping Card.Base in a new div and targeting the internal .card class with :global() CSS. The visual change itself is straightforward, but there is a significant scope issue.

• Misleading affordance on non-interactive cards: cardGrid.svelte is a shared layout primitive used in 119+ files — the vast majority are settings/configuration panels (e.g., updateName.svelte, dangerZone.svelte) where the card is purely informational. Applying a hover lift universally signals clickability where none exists, misleading users across the entire console UI.

Confidence Score: 2/5

Not safe to merge — the hover lift on a widely-shared layout primitive creates a misleading interactive affordance across 119+ non-interactive settings cards in the console.

The P1 finding (hover lift applied universally to all cardGrid usages including non-interactive settings cards) is a present UX defect that will affect the perceived interactivity of the entire console settings UI. Combined with the unresolved issues from prior review threads (zod dependency, rolldown-vite override removal), the PR needs rework before it can be merged.

src/lib/components/cardGrid.svelte — the hover effect needs to be scoped to only interactive card instances, not applied globally to the shared layout primitive.

Vulnerabilities

No security concerns identified.

Important Files Changed

Filename	Overview
src/lib/components/cardGrid.svelte	Added hover/active lift animation via a new wrapper div and scoped :global(.card) CSS; effect is applied globally to all 119+ usages including non-interactive settings cards, which creates a misleading interactive affordance
package.json	Adds zod as a production dependency (unrelated to this visual PR) and issues flagged in prior threads remain unresolved

_{Reviews (3): Last reviewed commit: "fix(card-grid): update box-shadow proper..." | Re-trigger Greptile}

[Copilot]

Pull request overview

This PR aims to enhance the visual hover/active interaction for the CardGrid component by adding elevation and smooth transitions, while also introducing unrelated dependency/tooling changes in package.json.

Changes:

• Added a wrapper plus scoped global CSS to animate card elevation (transform) and box-shadow on hover/active in cardGrid.svelte.
• Added zod to dependencies.
• Removed the vite override (previously pointing to rolldown-vite) from package.json.

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 5 comments.

File	Description
src/lib/components/cardGrid.svelte	Adds hover/active elevation + transitions using :global(.card) selectors scoped under a wrapper element.
package.json	Adds zod and removes the vite override entry under overrides.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The selector .card-grid-wrapper :global(.card) will match any .card nested inside the CardGrid slots (e.g., inner <Card.Base> cards in the aside slot), so the hover/transition styles will leak to unintended child cards. Consider narrowing the selector to only the CardGrid’s root card (e.g., direct child) or applying a dedicated class to the specific Card.Base you want to animate.

[Copilot]

will-change: transform, box-shadow is applied unconditionally, which can increase GPU memory usage and keep the element on a compositor layer even when it’s not interacting. Prefer applying will-change only during interaction (hover/focus) and consider disabling these transitions under prefers-reduced-motion: reduce for accessibility.

[Copilot]

:active on the card will typically only apply when the card element itself is the active target; clicking/pressing interactive children (buttons/links in the card) usually won’t trigger the parent .card:active. If the intent is “pressed” feedback when interacting anywhere inside the card, use a selector that reflects descendant active/focus state (e.g., via :has() / :focus-within) or handle it via pointer events.

[Copilot]

zod is added as a dependency but there are no runtime imports/usages in src/ (only a TODO comment mentions it). If this PR is meant to be purely visual, consider removing this dependency; otherwise include the related code changes and ensure the lockfile(s) used in CI (bun.lock with frozen lockfile) are updated accordingly.

[Copilot]

The repo docs indicate Vite is overridden to rolldown-vite, and bun.lock currently contains a vite override. Removing the overrides.vite entry from package.json will likely desync package.json/bun.lock and can break CI installs that use a frozen lockfile. Either keep the override (and update locks consistently) or update the docs/lockfiles as part of this change.

[greptile-apps]

Tip:

Greploop — Automatically fix all review issues by running /greploops in Claude Code. It iterates: fix, push, re-review, repeat until 5/5 confidence.

Use the Greptile plugin for Claude Code to query reviews, search comments, and manage custom context directly from your terminal.