## What kind of change does this PR introduce?
Studio UI refactor.
## What is the current behavior?
Failed replicated tables spread retry timing and error details across
several visually heavy blocks.
## What is the new behavior?
Condenses retry timing and failure details into a clearer table-level
presentation without changing retry behaviour or pipeline mutations.
| Before | After |
| --- | --- |
| <img width="1842" height="594" alt="CleanShot 2026-09-16 at 12 55
52@2x"
src="https://github.com/user-attachments/assets/fb6f6a3f-2e81-411e-9d49-ed4cf8cc66e7"
/> | <img width="1824" height="328" alt="CleanShot 2026-09-16 at 15 16
21@2x"
src="https://github.com/user-attachments/assets/bad558c4-2d4c-4d1b-bb68-32ad4d5b348f"
/> |
| _Not applicable._ | <img width="832" height="662" alt="CleanShot
2026-09-16 at 15 16 29@2x"
src="https://github.com/user-attachments/assets/540a5d55-f99f-4c1e-9a57-5ab2ac31e44e"
/> |
This is an independent slice extracted from #49630. The related review
series is #50443, this PR, #50445, #50446, then #49630.
## To test
1. Open `/project/<ref>/database/replication` and select a pipeline with
a failed table.
2. Confirm the table row presents its failure and retry timing without
expanding the row unnecessarily.
3. Open the error details dialog and confirm the underlying error
remains available.
This is difficult to test unless you have a properly-failing table. You
can instead do the following locally:
1. Check out `dnywh/tmp/pipelines-running-fixture`.
2. Open `/project/<ref>/database/replication/<pipelineId>`.
3. Use the floating pipeline-state switcher in the bottom-right.
4. Select _Running, some tables errored_.
## 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>
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 moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.
`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.
The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.