## Summary
This is a precursor to unifying "compute and disk" and "infrastructure
pages". First step is just updating the existing compute and disk page
to make use of standard page and form patterns.
- Reorganizes the existing Compute and Disk form into the established
settings layout pattern, with Scaling, Compute, Disk, and Advanced
sections.
- Moves billing deltas to section headers while retaining the sticky
review footer.
- Adds animated notices, validation-error scrolling, and a responsive
compute-size selector (2 columns by default, 3 from 680px, and 4 from
900px).
- Preserves permissions, entitlements, cooldowns, read-only warnings,
replica pricing, GP3 validation, Nano/PITR locks, and the free Micro
upgrade treatment.
- Keeps the redesigned experience on `/settings/compute-and-disk` so it
can be reviewed independently of the route cutover.
## Stack
1. #48368 (this PR)
2. #48369
3. #48370
## How to test
1. Check out `chore/infra-compute-1-config` and start Studio with `pnpm
dev:studio`.
2. Open `/project/<ref>/settings/compute-and-disk`.
3. Confirm the page header and Scaling, Compute, Disk, and Advanced
sections follow the standard settings-page spacing, with the plan notice
directly below the Scaling header.
4. Change the compute size and disk configuration. Confirm billing
deltas appear in the relevant section headers and the sticky review
footer summarizes and applies the pending changes.
5. Enter invalid GP3 IOPS or throughput values and submit. Confirm the
validation message is shown and the first invalid field is scrolled into
view.
6. Exercise representative project states: insufficient permissions,
read-only mode, resize cooldown, Nano with PITR, a project with read
replicas, and a free Micro upgrade. Confirm the existing locks,
warnings, pricing, and upgrade treatment remain intact.
7. Resize the viewport and confirm the compute cards use 2 columns by
default, 3 columns from 680px, and no more than 4 columns from 900px.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Reworked the Compute and Disk settings UI into clearer sectioned
pages, including smoother navigation to the first validation error.
- Added a transitional in-form NoticeBar for consistent alert rendering.
- Improved billing change badges to reflect accurate before/after
totals.
- **Bug Fixes**
- Fixed disk IOPS/throughput pricing to include replica-based charges.
- Strengthened disk sizing validation (GP3 limits, legacy/size edge
cases, spend-cap behavior, and provider-specific constraints).
- **Refactor**
- Updated key form field layouts for improved readability.
- **Tests**
- Expanded schema validation and pricing/billing badge test coverage.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Updates the dashboard disk-management copy to match the new AWS EBS
modification limits (already reflected in the docs): from the old fixed
"4-hour cooldown / once every 4 hours" framing to "up to 4 modifications
within a rolling 24-hour window".
This is a copy-only change plus one small logic-constant alignment.
Timer/countdown behavior is unchanged — this only updates wording to
bring the dashboard in line with the docs.
**Changed:**
- `DiskSpaceBar` autoscaling tooltip, `DiskCountdownRadial` card,
`DiskSizeConfiguration` "Importing a lot of data?" alert,
`DiskSizeConfigurationModal` alert title + both countdown branches,
`DiskManagementReviewAndSubmitDialog` IOPS + disk-size row descriptions,
and two code comments — all reworded to the new "4 per rolling 24-hour
window" framing
- `DiskSizeConfigurationModal` countdown now derives from the shared
`COOLDOWN_DURATION` constant (4h) instead of a stale hardcoded `6 * 60`
(6h), so the legacy resize path matches the newer disk-attributes path
## To test
- Open a Pro AWS project → **Settings → Compute and Disk** → hover the
**Autoscaling** pill on the disk bar: tooltip should read "…limited to 4
within a rolling 24-hour window" (no "once every 4 hours")
- Change IOPS only → **Review changes** → IOPS row description shows the
new "rolling 24-hour window… as soon as the previous one completes" copy
- Change disk size → **Review changes** → Disk size row shows "You can
modify disk attributes up to 4 times within a rolling 24-hour window"
(not "For 4 hours after changes…")
- On a non-AWS Pro project → **Database → Settings → Increase disk
size**: modal title reads "Disk modifications are limited to 4 per
rolling 24-hour window"; any "resize again in ~X" countdown is bounded
by 4 hours, not 6
- Sanity: none of the old "4-hour cooldown" / "once every 4 hours"
strings appear anywhere in the disk UI
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Updated disk resizing messages across the app to reflect a rolling
24-hour limit instead of a fixed 4-hour cooldown.
* Clarified when disk size, IOPS, and throughput changes are available
again, including more accurate next-available timing.
* Improved warning copy in disk configuration and review dialogs so
limit messages are consistent and easier to understand.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES/NO
## What kind of change does this PR introduce?
Bug fix, feature, docs update, ...
## What is the current behavior?
Please link any relevant issues here.
## What is the new behavior?
Feel free to include screenshots if it includes visual changes.
## Additional context
Add any other context or screenshots.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Add a warning that resizes may take additional time if they touch an
instance size < large.
Resolves FE-3746
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added an additional warning in the disk management review dialog when
a resize may require extra downtime.
* The dialog now highlights higher-risk resize changes before
submission, helping users make more informed decisions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## 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?
When a user selects IO2 on compute upgrade, the `0/MB` isn't quite
correct, whilst the costa delta of $0 is correct. We will hide the row
as it adds noise.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Fixed disk management UI to correctly display the throughput
configuration row only when selecting GP3 storage type, ensuring the
interface accurately reflects available options for the selected storage
type.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
## Summary
Adds a reusable `TaxDisclaimer` component ("Prices shown do not include
applicable taxes.") and places it on surfaces where users see a price
before confirming a billable action.
## Where it appears
- **Disk resize review
dialog** — `DiskManagementReviewAndSubmitDialog` (below the before/after
price comparison)
- **Add-on side panels** — PITR, Custom Domain, IPv4 (below the price
options)
- **Log drain destination form** — stacked under "See full pricing
breakdown here" in the footer
- **SMS MFA confirmation modal** — below the $75/$10 billing copy
- **Read replica pricing dialog** — at the end of the cost breakdown
- **Create branch modal** — below the disk/compute cost estimates
## Test plan
- [ ] Open disk/compute resize review dialog — disclaimer appears below
the before/after panel
- [ ] Open each add-on side panel (PITR / Custom Domain / IPv4) —
disclaimer appears below the price options
- [ ] Open log drain destination sheet — disclaimer stacks under the
pricing breakdown link in the footer
- [ ] Trigger SMS MFA confirmation — disclaimer appears below the
billing copy
- [ ] Open read replica pricing dialog ("Learn more" from deploy
replica) — disclaimer at the bottom
- [ ] Open create branch modal — disclaimer appears after the compute
cost block
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added tax disclaimers across multiple billing and pricing interfaces
throughout the platform. Users will now see notices regarding applicable
taxes displayed in various authentication settings, branch creation
workflows, database disk management dialogs, database replica pricing
screens, log drain configuration panels, custom domain settings, IPv4
address configuration, and Point-in-Time Recovery options.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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?
This takes our dialog to review compute upgrade's and gives it a bit
more visual clarity (as it can get confusing). Simplification and clear
communication of what differences there are.
| Before | After |
|--------|--------|
| <img width="663" height="722" alt="Screenshot 2026-04-07 at 16 58 33"
src="https://github.com/user-attachments/assets/dbb699b4-89ad-4172-8c23-e5d1ca5045f8"
/> | <img width="608" height="635" alt="Screenshot 2026-04-08 at 12 28
32"
src="https://github.com/user-attachments/assets/9a4a5952-6049-4cda-86e6-73773f001010"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **UI Improvements**
* Redesigned disk review dialog to a stacked "Before/After" layout with
a clear vertical breakdown of changes.
* Replaced badges/tooltips with inline per-line monthly deltas and
explicit summed totals.
* Replica note moved inline; cooldown and throughput explanations
consolidated and more broadly shown when storage type changes.
* Arrow between totals updated and "After" state emphasized.
* **Chores**
* Updated dialog spacing, padding, min-width, confirm button styling,
and dialog wording.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
