Fix/pricing calculator tooltip

[carlagn]

Summary by CodeRabbit

• Style

  • Improved Quick Start Presets responsive layout to stack vertically on small screens and wrap on larger viewports.
  • Minor text/whitespace and icon color adjustments across pricing and plan cards.

• New Features

  • Added light-mode variants for partner logos so appropriate images show in light/dark themes.
  • Replaced standalone info icon with an interactive tooltip (includes link) in Database Operations.

• Bug Fixes

  • Ensure navigation highlights the "orm" variant for the /ecosystem path.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blog	Ready	Preview, Comment	Apr 2, 2026 3:47pm
docs	Ready	Preview, Comment	Apr 2, 2026 3:47pm
eclipse	Ready	Preview, Comment	Apr 2, 2026 3:47pm
site	Ready	Preview, Comment	Apr 2, 2026 3:47pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b0791ef9-c404-408e-9cba-975327597b73

📥 Commits

Reviewing files that changed from the base of the PR and between b1ea634 and 70a2d25.

⛔ Files ignored due to path filters (2)

• apps/site/public/icons/companies/invisible-light.svg is excluded by !**/*.svg
• apps/site/public/icons/companies/invisible.svg is excluded by !**/*.svg

📒 Files selected for processing (3)

• apps/site/src/app/pricing/pricing-calculator.tsx
• apps/site/src/components/navigation-wrapper.tsx
• packages/ui/src/components/logo-parade.tsx

---

Walkthrough

Refactors and reflows the pricing calculator code and JSX, replaces a Database Operations info icon with a TooltipProvider/Tooltip, tweaks quick-start preset responsive layout, adds light-mode logo support, and extends an orm route allowlist; no exported/public function signatures changed.

Changes

Cohort / File(s)	Summary
Pricing Calculator apps/site/src/app/pricing/pricing-calculator.tsx	Code formatting and minor refactors: CALCULATOR_PLAN_ORDER now uses Object.keys(usagePricing) directly; expression/grouping rewraps across currency formatting and cost math; getMatchingPreset and InputShell signatures/typing/JSX whitespace reformatted. UI updates: replaced DB info icon with TooltipProvider/Tooltip + TooltipContent (includes link), removed the icon from the "Estimated SQL Queries" header, changed quick-start container from flex-wrap to flex-col md:flex-row md:flex-wrap, adjusted calculator icon color and small JSX/text wrapping tweaks.
Navigation allowlist / UTM apps/site/src/components/navigation-wrapper.tsx	Added "/ecosystem" to the orm pathname allowlist so getButtonVariant() returns "orm" for that path; simplified getUtmMedium(pathname) to a one-liner preserving output.
Logo Parade (image-mode support) packages/ui/src/components/logo-parade.tsx	Added cn import and conditional rendering for light-mode assets: primary imageUrl uses hidden dark:block when imageUrlLight exists, and a second <img> renders imageUrlLight with block dark:hidden; extended data to include imageUrlLight for the "Invisible" entry.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• Fix/pricing calculator tooltip #7757 — Overlapping edits to apps/site/src/app/pricing/pricing-calculator.tsx (same Object.keys change, getMatchingPreset/formatting refactors, and replacing the DB info icon with TooltipProvider/Tooltip).

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title references a tooltip feature that is indeed modified in the changeset, specifically the 'Database Operations' info icon replacement with a Tooltip component.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Apr 2, 2026, 3:53 PM

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/site/src/app/pricing/pricing-calculator.tsx`:
- Around line 514-518: TooltipTrigger currently wraps a non-focusable <i>
element which prevents keyboard users from opening the tooltip; replace that <i>
with a keyboard-focusable <button> and keep TooltipTrigger asChild so it
forwards props. Specifically, in the block using TooltipProvider / Tooltip /
TooltipTrigger, swap the <i className="fa-solid fa-circle-info ..."/> for a
<button> that preserves the icon classes (or contains the <i> for visuals), adds
an accessible label (e.g. aria-label="More info" or similar), and applies the
same styling so behavior matches the other tooltip usages (see the pattern used
around the other TooltipTrigger instances). Ensure the button is focusable and
visually identical to maintain accessibility and consistency.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 00d55c9b-5c2c-4e53-8af6-45dc9d5b24e8

📥 Commits

Reviewing files that changed from the base of the PR and between b919d81 and b1ea634.

📒 Files selected for processing (1)

• apps/site/src/app/pricing/pricing-calculator.tsx