From 5644beebf1d6276a0c1218c39c70f85d70b08e6e Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Mon, 2 Mar 2026 10:52:14 +1100
Subject: [PATCH] chore(studio): responsive AlertError (#43226)

## What kind of change does this PR introduce?

UI update

## What is the current behavior?

AlertError is usually full of prose yet has `horizontal` button
placement. This looks incredibly awkward at smaller breakpoints.

## What is the new behavior?

AlertError swaps the default `layout` to `responsive`, making the
smaller breakpoint composition much nicer.

| Before | After |
| --- | --- |
| <img width="370" height="850" alt="Spinner Toolshed
Supabase-FBF6DD34-258E-4E36-B3DF-533F0EDDC307"
src="https://github.com/user-attachments/assets/cb38c270-bdc1-46b7-8fed-7c6ff9f15ccc"
/> | <img width="370" height="850" alt="Spinner Toolshed
Supabase-37BDDE9A-DF90-4B96-95F4-4AA15A12682A"
src="https://github.com/user-attachments/assets/d8ff89bf-2451-44e0-a048-418272f7514a"
/> |

## Additional context

2+ buttons (`additionalActions`) still forces the `vertical` layout
type.

## To test

The pictured example is not available on this branch. An easy one to
test is
[CreateBranchModal](https://github.com/supabase/supabase/blob/2cc275fd51818752a7ff16eb46c2697e9f1f2c9a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx#L410):

```diff
- {isErrorConnections && (
+ {true && (
        <AlertError
          error={connectionsError}
          subject="Failed to retrieve GitHub connection information"
        />
      )}
```
---
 apps/studio/components/ui/AlertError.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/studio/components/ui/AlertError.tsx b/apps/studio/components/ui/AlertError.tsx
index 74c6dc7c16d50..0ec74d9448780 100644
--- a/apps/studio/components/ui/AlertError.tsx
+++ b/apps/studio/components/ui/AlertError.tsx
@@ -11,7 +11,7 @@ export interface AlertErrorProps {
   projectRef?: string
   subject?: string
   error?: { message: string } | null
-  layout?: 'vertical' | 'horizontal'
+  layout?: 'vertical' | 'horizontal' | 'responsive'
   className?: string
   showIcon?: boolean
   showInstructions?: boolean
@@ -51,7 +51,7 @@ export const AlertError = ({
   error,
   className,
   showIcon = true,
-  layout = 'horizontal',
+  layout = 'responsive',
   showInstructions = true,
   showErrorPrefix = true,
   children,