UI: Inconsistent box width calculations across components #9

New issue

Closed

opened 2025-10-14 15:38:05 -06:00 by navan · 0 comments

navan commented

2025-10-14 15:38:05 -06:00

Owner

Originally created by @bjcoombs on 10/14/2025

Description

UI box width calculations are inconsistent across components, causing visual misalignment issues in various scenarios. This affects multiple components including warning boxes, dashboard boxes, recommended task boxes, and suggested steps boxes.

Issues Discovered

1. Warning box width misalignment (original issue)

When running tm list with no tasks, the warning box "No tasks found matching the criteria" is narrower than the dashboard boxes shown when tasks are present.

With no tasks:

╭──────────────────────────────────────────────╮
│                                              │
│   ⚠ No tasks found matching the criteria.   │
│                                              │
╰──────────────────────────────────────────────╯

(46 characters wide)

With tasks:

╭───────────────────────────────────────────────────────────────────╮
│                                                                   │
│   Project Dashboard                                               │
│   Tasks Progress: ███████████████████░░░░░░░░░░░ 61% 57/93        │
│   ...                                                              │
╰───────────────────────────────────────────────────────────────────╯

(67 characters wide)

2. Recommended Next Task box misalignment

When task status is "in-progress" (▶ in-progress), the "RECOMMENDED NEXT TASK" box doesn't align properly with other boxes. Works correctly when status is "pending" (○ pending).

Root Cause

Different components were using inconsistent width calculation approaches:

displayWarning(): No width specified (wraps content tightly)
createTaskTable(): process.stdout.columns * 0.9 || 100 (inconsistent fallback)
displayRecommendedNextTask(): process.stdout.columns * 0.97 (no fallback)
displaySuggestedNextSteps(): process.stdout.columns * 0.97 (no fallback)

Solution

Extract a shared getBoxWidth() helper function that:

Provides consistent width calculation logic
Handles undefined process.stdout.columns gracefully
Supports configurable percentage and minimum width
Serves as single source of truth for all UI box widths

Expected Behavior

All boxes should use consistent width calculation based on terminal width with proper fallback handling.

Environment

Task Master version: 0.29.0
Platform: macOS

Impact

Visual inconsistency in UI across multiple components. Low priority cosmetic issue.

*Originally created by @bjcoombs on 10/14/2025* ## Description UI box width calculations are inconsistent across components, causing visual misalignment issues in various scenarios. This affects multiple components including warning boxes, dashboard boxes, recommended task boxes, and suggested steps boxes. ## Issues Discovered ### 1. Warning box width misalignment (original issue) When running `tm list` with no tasks, the warning box "No tasks found matching the criteria" is narrower than the dashboard boxes shown when tasks are present. **With no tasks:** ``` ╭──────────────────────────────────────────────╮ │ │ │ ⚠ No tasks found matching the criteria. │ │ │ ╰──────────────────────────────────────────────╯ ``` (46 characters wide) **With tasks:** ``` ╭───────────────────────────────────────────────────────────────────╮ │ │ │ Project Dashboard │ │ Tasks Progress: ███████████████████░░░░░░░░░░░ 61% 57/93 │ │ ... │ ╰───────────────────────────────────────────────────────────────────╯ ``` (67 characters wide) ### 2. Recommended Next Task box misalignment When task status is "in-progress" (▶ in-progress), the "RECOMMENDED NEXT TASK" box doesn't align properly with other boxes. Works correctly when status is "pending" (○ pending). ## Root Cause Different components were using inconsistent width calculation approaches: - `displayWarning()`: No width specified (wraps content tightly) - `createTaskTable()`: `process.stdout.columns * 0.9 || 100` (inconsistent fallback) - `displayRecommendedNextTask()`: `process.stdout.columns * 0.97` (no fallback) - `displaySuggestedNextSteps()`: `process.stdout.columns * 0.97` (no fallback) ## Solution Extract a shared `getBoxWidth()` helper function that: - Provides consistent width calculation logic - Handles undefined `process.stdout.columns` gracefully - Supports configurable percentage and minimum width - Serves as single source of truth for all UI box widths ## Expected Behavior All boxes should use consistent width calculation based on terminal width with proper fallback handling. ## Environment - Task Master version: 0.29.0 - Platform: macOS ## Impact Visual inconsistency in UI across multiple components. Low priority cosmetic issue.