TheOtherBrian1andGildas Garcia 7259d10053 Fixes Typo in Spend Cap Modal (#44319) ...

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Fixes typo in Dashboard

## What is the current behavior?

In the [Billing
Dashboard](https://supabase.com/dashboard/org/_/billing), when one
updates the spend cap:
<img width="2376" height="502" alt="CleanShot 2026-03-29 at 14 52 01@2x"
src="https://github.com/user-attachments/assets/5169fc01-cf78-4450-9184-7d7d6a28b000"
/>

The pop-out modal has a typo (states "includedthen" instead of
"included, then"):
<img width="1182" height="1408" alt="CleanShot 2026-03-29 at 14 52
17@2x"
src="https://github.com/user-attachments/assets/53622f29-cc02-4138-aa83-4e098d31d1a2"
/>

## What is the new behavior?

Updated the line:
```jsx
<p className="text-xs pl-4">{item.plans['pro']}</p>
```

to
```jsx
<p className="text-xs pl-4">
  {Array.isArray(item.plans['pro'])
    ? item.plans['pro']?.join(', ')
    : item.plans['pro']}
</p>
```

Fixed the issue:
<img width="1302" height="1072" alt="CleanShot 2026-03-29 at 15 27
30@2x"
src="https://github.com/user-attachments/assets/722056c8-7b62-4993-83bb-a2ed4cbc5264"
/>

## Additional context

[A user reported the
error](https://supabase.frontapp.com/open/msg_32qr4hpa?key=RjpHZRymA4HTNLMFa-PQ6l_Ne7L66x8A)

The file containing pricing data
"[packages/shared-data/pricing.ts](https://github.com/supabase/supabase/blob/7d7de475ecf31f95d37199456482b665c80aadc8/packages/shared-data/pricing.ts#L125)"
has the following JS object:
```js
// example problematic entry
plans: { 
    //rest of object
    pro: ['8 GB disk size per project included', 'then $0.125 per GB'],
    //rest of object
},
...
// some other entry
plans: {
    //rest of object
    pro: false,
    //rest of object
}
...
```

The relevant content in the Dashboard is an array with two entries:
> ['8 GB disk size per project included', 'then $0.125 per GB']

The [modal
file](https://github.com/supabase/supabase/blob/7d7de475ecf31f95d37199456482b665c80aadc8/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx#L174)
deconstructs it within the following element:
```jsx
{usageItems.map((item: any) => {
  return (
    <Table.tr key={item.title}>
      <Table.td>
        <p className="text-xs pl-4">{item.title}</p>
      </Table.td>
      <Table.td>
        <p className="text-xs pl-4">{item.plans['pro']}</p> <!--------RELEVANT LINE-->
      </Table.td>
    </Table.tr>
  )
})}
```

It doesn't bother to separate entries in the array, so the element just
concatenates the two entries without any spacing.

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>

2026-03-31 09:39:48 +02:00

..

design-system

chore: add shadcn input-group components (#44282)

2026-03-31 09:14:56 +02:00

docs

chore(docs): add Samir Ketema to humans.txt (#44374)

2026-03-30 20:56:58 -07:00

learn

chore: Clean the ui package from next imports (#44278)

2026-03-30 10:58:37 +02:00

studio

Fixes Typo in Spend Cap Modal (#44319)

2026-03-31 09:39:48 +02:00

ui-library

chore: Clean the ui package from next imports (#44278)

2026-03-30 10:58:37 +02:00

www

Added a meeting scheduler form (#44368)

2026-03-31 01:08:38 +01:00