Display server errors in modals, don't use toasts (#3192)

Found this while working on #3178. Instance resize, attach floating IP,
and attach ephemeral IP all had `onError`s that triggered toasts on
server error. The first two also displayed the error in the modal.
Ephemeral IP did not. This PR gets rid of the toasts and puts an error
display into attach ephemeral IP. It doesn't look very good (maybe we
should move the error and give it a little box or something), but it's
basically the same as it already was, minus the extra toasts.

(Screenshot is from playwright, hence the weird missing submit button —
I think it's right in the middle of switching between the button text
and the loading spinner.)

<img width="930" height="528" alt="Screenshot 2026-04-21 at 5 20 23 PM"
src="https://github.com/user-attachments/assets/0c6db6a6-913f-40aa-8ccc-245be9dfc1d0"
/>

Author: david-crespo

app/components/AttachEphemeralIpModal.tsx

@@ -65,9 +65,6 @@ export const AttachEphemeralIpModal = ({
       addToast(<>IP <HL>{ephemeralIp.ip}</HL> attached</>)
       onDismiss()
     },
-    onError: (err) => {
-      addToast({ title: 'Error', content: err.message, variant: 'error' })
-    },
   })
 
   const form = useForm({ defaultValues: { pool: defaultPool } })
@@ -96,6 +93,9 @@ export const AttachEphemeralIpModal = ({
               noItemsPlaceholder="No pools available"
             />
           </form>
+          {instanceEphemeralIpAttach.error && (
+            <p className="text-error mt-4">{instanceEphemeralIpAttach.error.message}</p>
+          )}
         </Modal.Section>
       </Modal.Body>
       <Modal.Footer

app/components/AttachFloatingIpModal.tsx

@@ -85,9 +85,6 @@ export const AttachFloatingIpModal = ({
       addToast(<>IP <HL>{floatingIp.name}</HL> attached</>)
       onDismiss()
     },
-    onError: (err) => {
-      addToast({ title: 'Error', content: err.message, variant: 'error' })
-    },
   })
   const form = useForm({ defaultValues: { floatingIp: '' } })
   const floatingIp = form.watch('floatingIp')

app/pages/project/instances/InstancePage.tsx

@@ -301,9 +301,6 @@ export function ResizeInstanceModal({
           : undefined, // Only link to the instance if we're not already on that page
       })
     },
-    onError: (err) => {
-      addToast({ title: 'Error', content: err.message, variant: 'error' })
-    },
   })
 
   const form = useForm({

test/e2e/instance.e2e.ts

@@ -218,13 +218,10 @@ test('resize modal stays open on server error', async ({ page }) => {
   await resizeModal.getByRole('textbox', { name: 'Memory' }).fill('20')
   await resizeModal.getByRole('button', { name: 'Resize' }).click()
 
-  // Wait for the error toast, which confirms the mutation has completed
-  await expect(page.getByTestId('Toasts')).toContainText('Cannot update instance')
-
-  // Modal should stay open so the user can see the error and adjust values
+  // Error renders inline inside the modal; modal stays open so the user can
+  // see the error and adjust values.
+  await expect(resizeModal).toContainText('Cannot update instance')
   await expect(resizeModal).toBeVisible()
-
-  await closeToast(page)
 })
 
 test('delete from instance detail', async ({ page }) => {