diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx index c153f8e86a..9ae684f163 100644 --- a/packages/cli/src/ui/components/Footer.tsx +++ b/packages/cli/src/ui/components/Footer.tsx @@ -115,7 +115,7 @@ export const FooterRow: React.FC<{ items.forEach((item, idx) => { if (idx > 0 && !showLabels) { elements.push( - + · , ); @@ -124,11 +124,11 @@ export const FooterRow: React.FC<{ elements.push( {showLabels && ( - + {item.header} )} - {item.element} + {item.element} , ); }); @@ -136,7 +136,7 @@ export const FooterRow: React.FC<{ return ( {elements} @@ -403,37 +403,14 @@ export const Footer: React.FC = () => { } // --- Width Fitting Logic --- - let currentWidth = 2; // Initial padding - const columnsToRender: FooterColumn[] = []; - let droppedAny = false; + // Sum up fixed widths to see how much is left for CWD + const nonCwdWidth = potentialColumns + .filter((c) => c.id !== 'cwd') + .reduce((sum, c) => sum + c.width + (showLabels ? COLUMN_GAP : 3), 0); + const cwdBudget = Math.max(20, terminalWidth - nonCwdWidth - 4); - for (let i = 0; i < potentialColumns.length; i++) { - const col = potentialColumns[i]; - const gap = columnsToRender.length > 0 ? (showLabels ? COLUMN_GAP : 3) : 0; // Use 3 for dot separator width - const budgetWidth = col.id === 'cwd' ? 20 : col.width; - - if ( - col.isHighPriority || - currentWidth + gap + budgetWidth <= terminalWidth - 2 - ) { - columnsToRender.push(col); - currentWidth += gap + budgetWidth; - } else { - droppedAny = true; - } - } - - const totalBudgeted = columnsToRender.reduce( - (sum, c, idx) => - sum + - (c.id === 'cwd' ? 20 : c.width) + - (idx > 0 ? (showLabels ? COLUMN_GAP : 3) : 0), - 2, - ); - const excessSpace = Math.max(0, terminalWidth - totalBudgeted); - - const rowItems: FooterRowItem[] = columnsToRender.map((col) => { - const maxWidth = col.id === 'cwd' ? 20 + excessSpace : col.width; + const rowItems: FooterRowItem[] = potentialColumns.map((col) => { + const maxWidth = col.id === 'cwd' ? cwdBudget : col.width; return { key: col.id, header: col.header, @@ -441,16 +418,8 @@ export const Footer: React.FC = () => { }; }); - if (droppedAny) { - rowItems.push({ - key: 'ellipsis', - header: '', - element: , - }); - } - return ( - + ); diff --git a/packages/cli/src/ui/components/__snapshots__/Footer.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/Footer.test.tsx.snap index f5090725ef..86f5e73ee1 100644 --- a/packages/cli/src/ui/components/__snapshots__/Footer.test.tsx.snap +++ b/packages/cli/src/ui/components/__snapshots__/Footer.test.tsx.snap @@ -13,8 +13,8 @@ exports[`