Repository: supabase/supabase
File: apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/ComputeMetric.tsx (TypeScript)

Code before:
      <HoverCardTrigger>
        <div>
          <Link href={`/org/${slug}/usage#${metric.anchor}`}>
            <div className="group flex items-center space-x-2">
              <p className="text-sm text-foreground-light group-hover:text-foreground transition cursor-pointer">
                {metric.name}
              </p>
              <ChevronRight strokeWidth={1.5} size={16} className="transition" />
            </div>
          </Link>
          <span className="text-sm">{usageLabel}</span>&nbsp;
          {relativeToSubscription && usageMeta?.cost && usageMeta.cost > 0 ? (
            <span className="text-sm" translate="no">
              ({formatCurrency(usageMeta?.cost)})
            </span>
          ) : null}
        </div>
      </HoverCardTrigger>
      <HoverCardContent side="bottom" align="end" className="w-[500px]" animate="slide-in">
        <div className="text-sm text-foreground space-y-2">
          <p className="font-medium" translate="no">
            {usageMeta?.unit_price_desc}
          </p>

          <div className="my-2">
            {usageMeta?.metric === ComputeUsageMetric.COMPUTE_HOURS_BRANCH ? (
              <p className="text-sm">
                Each Preview branch is a separate environment with all Supabase services (Database,
                Auth, Storage, etc.).{' '}
                <Link
                  href="https://supabase.com/docs/guides/platform/manage-your-usage/branching"
                  target="_blank"
                  className="transition text-brand hover:text-brand-600 underline"
                >
                  Read more
                </Link>
              </p>
            ) : (
              <p className="text-sm">
                Every project is a dedicated server and database. For every hour your project is
                active, it incurs compute costs based on the compute size of your project. Paused
                projects do not incur compute costs.{' '}
                <Link
                  href="https://supabase.com/docs/guides/platform/manage-your-usage/compute"
                  target="_blank"
                  className="transition text-brand hover:text-brand-600 underline"
                >
                  Read more
                </Link>
              </p>
            )}

Review comment (suggestion):
i actually can't tell if this is doing anything 🤔 

Preview:
<img width="597" height="166" alt="image" src="https://github.com/user-attachments/assets/041c7c0d-9885-46ba-a1c4-5eab0458df63" />

Prod:
<img width="593" height="169" alt="image" src="https://github.com/user-attachments/assets/95521b7e-bb9f-48e6-949f-35b39e21dbee" />




Code after:
    if (!usageMeta || !usageMeta.project_allocations) return []

    return usageMeta.project_allocations.sort((a, b) => b.usage - a.usage)
  }, [usageMeta])

  return (
    <HoverCard openDelay={50} closeDelay={200}>
      <HoverCardTrigger asChild>
        <div className={className}>
          <Link href={`/org/${slug}/usage#${metric.anchor}`}>
            <div className="group flex items-center space-x-2">
              <p className="text-sm text-foreground-light group-hover:text-foreground transition cursor-pointer">
                {metric.name}
              </p>
              <ChevronRight strokeWidth={1.5} size={16} className="transition" />
            </div>
          </Link>
          <span className="text-sm">{usageLabel}</span>&nbsp;
          {relativeToSubscription && usageMeta?.cost && usageMeta.cost > 0 ? (
            <span className="text-sm" translate="no">
              ({formatCurrency(usageMeta?.cost)})
            </span>
          ) : null}
        </div>
      </HoverCardTrigger>
      <HoverCardContent side="bottom" align="end" className="w-[500px]" animate="slide-in">
        <div className="text-sm text-foreground space-y-2">
          <p className="font-medium" translate="no">
            {usageMeta?.unit_price_desc}
          </p>

          <div className="my-2">
            {usageMeta?.metric === ComputeUsageMetric.COMPUTE_HOURS_BRANCH ? (
              <p className="text-sm">
                Each Preview branch is a separate environment with all Supabase services (Database,
                Auth, Storage, etc.).{' '}
                <Link
                  href="https://supabase.com/docs/guides/platform/manage-your-usage/branching"
                  target="_blank"
                  className="transition text-brand hover:text-brand-600 underline"
                >
                  Read more
                </Link>
              </p>
            ) : (
              <p className="text-sm">
                Every project is a dedicated server and database. For every hour your project is
                active, it incurs compute costs based on the compute size of your project. Paused
                projects do not incur compute costs.{' '}
                <Link
                  href="https://supabase.com/docs/guides/platform/manage-your-usage/compute"