fix: keep confirm modal actions visible for long titles (#1578)

frontend/src/components/EditorLayout/DeleteStackDialog.tsx

@@ -22,11 +22,18 @@ export function DeleteStackDialog({ open, onOpenChange, stackName, onConfirm }:
             open={open}
             onOpenChange={handleOpenChange}
             variant="destructive"
-            kicker={`${(stackName ?? 'STACK').toUpperCase()} · REMOVE · IRREVERSIBLE`}
+            kicker="REMOVE · IRREVERSIBLE"
             title={
                 stackName ? (
                     <>
-                        Delete <em className="font-display italic text-destructive">{stackName}</em>?
+                        Delete{' '}
+                        <em
+                            className="font-display italic text-destructive break-all"
+                            title={stackName}
+                        >
+                            {stackName}
+                        </em>
+                        ?
                     </>
                 ) : (
                     'Delete stack?'

frontend/src/components/EditorLayout/__tests__/DeleteStackDialog.test.tsx

@@ -0,0 +1,31 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { DeleteStackDialog } from '../DeleteStackDialog';
+
+const LONG_STACK_NAME = 'this-is-a-very-long-stack-name-that-should-not-push-actions-off-screen';
+
+function renderLongNameDialog() {
+    render(
+        <DeleteStackDialog
+            open
+            onOpenChange={vi.fn()}
+            stackName={LONG_STACK_NAME}
+            onConfirm={vi.fn()}
+        />,
+    );
+}
+
+describe('DeleteStackDialog', () => {
+    it('keeps Delete and Cancel visible when the stack name is very long', () => {
+        renderLongNameDialog();
+
+        expect(screen.getByRole('button', { name: 'Delete' })).toBeVisible();
+        expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
+    });
+
+    it('exposes the full stack name on hover via title', () => {
+        renderLongNameDialog();
+
+        expect(screen.getByTitle(LONG_STACK_NAME)).toHaveTextContent(LONG_STACK_NAME);
+    });
+});