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

Scope clarification

After reviewing usage across the codebase, most CardGrid instances are used for non-interactive settings and configuration panels.

To avoid introducing misleading affordances, this PR:

• Adds an opt-in interactive prop
• Does not modify existing usages
• Leaves adoption to be applied selectively where appropriate

This keeps the change safe and backward-compatible.

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

GH.PR.mp4

[greptile-apps]

Greptile Summary

This PR adds an opt-in interactive prop to CardGrid that applies hover/active elevation via translateY and box-shadow, wrapping the card in a scoped div. The implementation is safe in scope, but the newly added CSS block has malformed indentation that will cause bun run lint (Prettier) to fail in CI.

• P1 — lint failure: The .card-grid-wrapper.interactive selector is indented 4 spaces while its body and closing brace are at column 0; Prettier will reject this and CI will fail.
• P2 — cursor: pointer without click forwarding: The interactive class sets a pointer cursor but the component does not forward on:click, making the affordance misleading unless the parent independently wires up interaction.

Confidence Score: 3/5

Not safe to merge — the broken CSS indentation will fail the CI lint gate.

A P1 formatting issue (mismatched indentation in the style block) will cause bun run lint to fail in CI, blocking the build. Combined with unresolved prior concerns (zod dependency, rolldown-vite override removal, lockfile), the PR has multiple issues that need to be addressed first.

src/lib/components/cardGrid.svelte — broken CSS indentation; package.json — unrelated dependency changes.

Important Files Changed

Filename	Overview
src/lib/components/cardGrid.svelte	Adds opt-in interactive prop with hover/active elevation styles; the new CSS block has broken indentation (selector at +4 spaces, body at 0) that will fail bun run lint in CI, and cursor: pointer is applied without a forwarded click event.
package.json	Loosens @appwrite.io/pink-icons from exact pin 0.25.0 to ^0.25.0 (unrelated to PR scope) and adds zod dependency (flagged in prior review).
src/global.d.ts	Adds ambient module declarations for @appwrite.io/pink-legacy and @appwrite.io/pink-icons; missing trailing newline (minor).

_{Reviews (5): Last reviewed commit: "fix(card-grid): update card grid styles ..." | 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]

: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.

[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.

[ChiragAgg5k]

why do we need zod?

[ChiragAgg5k]

please share a video of before and after

[ArhanAnsari]

GH.PR.mp4

@ChiragAgg5k Thanks for the suggestion — here’s a quick before vs after demo of the hover interaction.

To keep the demo focused and avoid backend setup, I recorded this using a local UI setup with mocked data.

• Before: no hover feedback
• After: subtle lift + shadow (applied only when interactive is enabled)

Let me know if you’d like me to apply this to specific interactive views in the console as well.