diff --git a/packages/cli/src/ui/components/AskUserDialog.test.tsx b/packages/cli/src/ui/components/AskUserDialog.test.tsx
index 5217455358..bb76fd3aeb 100644
--- a/packages/cli/src/ui/components/AskUserDialog.test.tsx
+++ b/packages/cli/src/ui/components/AskUserDialog.test.tsx
@@ -1581,4 +1581,71 @@ describe('AskUserDialog', () => {
expect(frame).toContain('1. Option 1');
});
});
+
+ it('indents multi-line descriptions correctly', async () => {
+ const questions: Question[] = [
+ {
+ question: 'Single choice?',
+ header: 'Indent Test',
+ type: QuestionType.CHOICE,
+ options: [
+ {
+ label: 'Option 1',
+ description:
+ 'This is a very long description that is expected to wrap onto multiple lines in a narrow terminal. We want to ensure that all lines are correctly indented.',
+ },
+ ],
+ multiSelect: false,
+ },
+ ];
+
+ const { lastFrame, waitUntilReady } = await renderWithProviders(
+ ,
+ { width: 40 },
+ );
+
+ await waitFor(async () => {
+ await waitUntilReady();
+ // Snapshot will capture the visual alignment
+ expect(lastFrame()).toMatchSnapshot();
+ });
+ });
+
+ it('indents multi-line descriptions correctly in multi-select mode', async () => {
+ const questions: Question[] = [
+ {
+ question: 'Multi-select?',
+ header: 'Indent Test',
+ type: QuestionType.CHOICE,
+ options: [
+ {
+ label: 'Option 1',
+ description:
+ 'This is a very long description that is expected to wrap onto multiple lines in a narrow terminal. We want to ensure that all lines are correctly indented even with checkboxes.',
+ },
+ ],
+ multiSelect: true,
+ },
+ ];
+
+ const { lastFrame, waitUntilReady } = await renderWithProviders(
+ ,
+ { width: 40 },
+ );
+
+ await waitFor(async () => {
+ await waitUntilReady();
+ expect(lastFrame()).toMatchSnapshot();
+ });
+ });
});
diff --git a/packages/cli/src/ui/components/AskUserDialog.tsx b/packages/cli/src/ui/components/AskUserDialog.tsx
index 7e1dbf9c00..61caf558a5 100644
--- a/packages/cli/src/ui/components/AskUserDialog.tsx
+++ b/packages/cli/src/ui/components/AskUserDialog.tsx
@@ -1004,13 +1004,15 @@ const ChoiceQuestionView: React.FC = ({
)}
{optionItem.description && (
-
- {' '}
-
-
+ // Padding aligns with option label: 4 for multi-select (checkbox + space), 1 for single-select
+
+
+
+
+
)}
);
diff --git a/packages/cli/src/ui/components/__snapshots__/AskUserDialog.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/AskUserDialog.test.tsx.snap
index cdc060d9d7..3dcc3815aa 100644
--- a/packages/cli/src/ui/components/__snapshots__/AskUserDialog.test.tsx.snap
+++ b/packages/cli/src/ui/components/__snapshots__/AskUserDialog.test.tsx.snap
@@ -111,6 +111,42 @@ Enter to select · ↑/↓ to navigate · Esc to cancel
"
`;
+exports[`AskUserDialog > indents multi-line descriptions correctly 1`] = `
+"Single choice?
+
+● 1. Option 1
+ This is a very long description
+ that is expected to wrap onto
+ multiple lines in a narrow
+ terminal. We want to ensure that
+ all lines are correctly indented.
+ 2. Enter a custom value
+
+Enter to select · ↑/↓ to navigate · Esc
+to cancel
+"
+`;
+
+exports[`AskUserDialog > indents multi-line descriptions correctly in multi-select mode 1`] = `
+"Multi-select?
+(Select all that apply)
+
+● 1. [ ] Option 1
+ This is a very long description
+ that is expected to wrap onto
+ multiple lines in a narrow
+ terminal. We want to ensure
+ that all lines are correctly
+ indented even with checkboxes.
+ 2. [ ] Enter a custom value
+ Done
+ Finish selection
+
+Enter to select · ↑/↓ to navigate · Esc
+to cancel
+"
+`;
+
exports[`AskUserDialog > renders question and options 1`] = `
"Which authentication method should we use?
@@ -188,7 +224,7 @@ exports[`AskUserDialog > verifies "All of the above" visual state with snapshot
1. [x] TypeScript
2. [x] ESLint
● 3. [x] All of the above
- Select all options
+ Select all options
4. [ ] Enter a custom value
Done
Finish selection