fix: standardize UI box width calculations across components (#1305)

Co-authored-by: Ralph Khreish <35776126+Crunchyman-ralph@users.noreply.github.com>

apps/cli/src/ui/components/next-task.component.ts

@@ -6,7 +6,7 @@
 import chalk from 'chalk';
 import boxen from 'boxen';
 import type { Task } from '@tm/core/types';
-import { getComplexityWithColor } from '../../utils/ui.js';
+import { getComplexityWithColor, getBoxWidth } from '../../utils/ui.js';
 
 /**
  * Next task display options
@@ -113,7 +113,7 @@ export function displayRecommendedNextTask(
 			borderColor: '#FFA500', // Orange color
 			title: chalk.hex('#FFA500')('⚡ RECOMMENDED NEXT TASK ⚡'),
 			titleAlignment: 'center',
-			width: process.stdout.columns * 0.97,
+			width: getBoxWidth(0.97),
 			fullscreen: false
 		})
 	);

apps/cli/src/ui/components/suggested-steps.component.ts

@@ -5,6 +5,7 @@
 
 import chalk from 'chalk';
 import boxen from 'boxen';
+import { getBoxWidth } from '../../utils/ui.js';
 
 /**
  * Display suggested next steps section
@@ -24,7 +25,7 @@ export function displaySuggestedNextSteps(): void {
 				margin: { top: 0, bottom: 1 },
 				borderStyle: 'round',
 				borderColor: 'gray',
-				width: process.stdout.columns * 0.97
+				width: getBoxWidth(0.97)
 			}
 		)
 	);