fix(dashboard): align web vitals breakdown values

[akash3444]

Summary

Fixes value alignment in the Web Vitals breakdown table across Pages, Countries, Regions, Cities, and Browsers.

• Moves success and error icons before metric values so the numbers remain right-aligned.
• Prevents status icons from shrinking beside three-decimal CLS values.
• Increases the CLS column width from 76px to 78px to prevent clipping.

Screenshots

Pages

Before

After

Countries

Before

After

Regions

Before

After

Cities

Before

After

Browsers

Before

After

---

Summary by cubic

Aligns Web Vitals breakdown values by moving status icons before metric numbers and widening the CLS column to avoid clipping. Previously numbers shifted when icons rendered and some three-decimal CLS values clipped; now numbers remain right-aligned, icons keep fixed size, and CLS has enough width.

Review notes

• Verify right alignment and no clipping across Pages, Countries, Regions, Cities, and Browsers tables.
• Confirm icons render before values, do not shrink, and are aria-hidden.
• cls compact column width increases from 76px to 78px; check table layout remains stable.

^{Written for commit e758c63. Summary will update on new commits.}

[vercel]

@akash3444 is attempting to deploy a commit to the Databuddy OSS Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
documentation	Skipped		Aug 21, 2026 2:55pm

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 03e01cfa-bc16-4439-9605-9601f35ce1a9

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[greptile-apps]

Greptile Summary

The PR aligns Web Vitals values by placing non-shrinking status icons before right-justified metric text and slightly widening the CLS column.

• Moves good and poor status icons before their metric values.
• Prevents status icons from shrinking and hides decorative icons from assistive technology.
• Increases the shared CLS compact-column width from 76px to 78px.

Confidence Score: 5/5

The PR appears safe to merge, with no concrete blocking or independently actionable non-blocking issues identified.

The updated metric wrapper fills its fixed-width table cell and consistently aligns numeric values to the right, while the CLS width adjustment applies only to the intended Web Vitals breakdown columns.

Important Files Changed

Filename	Overview
apps/dashboard/app/(main)/websites/[id]/_components/tabs/performance/_components/web-vitals-metric-cell.tsx	Reorders decorative status icons and right-aligns numeric Web Vitals values without introducing a concrete regression.
apps/dashboard/components/table/table-content.tsx	Widens the CLS compact column by two pixels; current uses are limited to the intended Web Vitals breakdown tables.

_{Reviews (1): Last reviewed commit: "fix(dashboard): align web vitals breakdo..." | Re-trigger Greptile}