Force vertical stacking of percentiles in ROI table

Purpose: Fix erratic CSS layout wrapping where percentiles would sometimes sit adjacent to the value instead of stacking neatly beneath it on wider displays.
        - Modified the `tr.innerHTML` assignments in `ts/roi.ts`.
        - Swapped the empty space characters that separated the value and the `<span>` tags with explicit `<br>` line break tags.

ts/roi.ts

@@ -355,15 +355,17 @@ async function render() {
 		const pctCap = getPercentiles(p.market_capacity_base, arrCap, false)[percentileMode === 'absolute' ? 'abs' : 'rel'];
 		
 		// Interplate the format string requested directly into the <small> span wrapper.
+		// EXTREME DETAIL: Replaced all space characters right before the <span> wrappers with <br> tags
+		// to guarantee consistent vertical stacking of the main value and the percentile regardless of CSS flex/wrapping behaviors.
 		tr.innerHTML = `
 			<td>${p.outputs.map(o => o.ticker).join(', ')}</td>
 			<td>${expertise[p.expertise]}</td>
-			<td style="color: ${color(p.profit_per_base, 0, 150000)}">${formatSigFig(p.profit_per_base)} <span style="font-size: 0.85em; opacity: 0.6;">${pctProfit}</span></td>
-			<td><span style="color: ${color(p.break_even, 30, 3)}">${formatSigFig(p.break_even)}</span>d <span style="font-size: 0.85em; opacity: 0.6;">${pctBreak}</span></td>
-			<td style="color: ${color(p.capex_val, 3_000_000, 400_000)}">${formatSigFig(p.capex_val)} <span style="font-size: 0.85em; opacity: 0.6;">${pctCapex}</span></td>
-			<td style="color: ${color(p.opex_val, 400_000, 10_000)}">${formatSigFig(p.opex_val)} <span style="font-size: 0.85em; opacity: 0.6;">${pctOpex}</span></td>
-			<td style="color: ${color(p.normalized_logistics_per_base, 1.0, 0.1)}">${formatSigFig(p.logistics_per_base)} ${p.logistics_bottleneck} <span style="font-size: 0.85em; opacity: 0.6;">${pctLog}</span></td>
-			<td style="color: ${color(p.market_capacity_base, 0.04, 1)}">${formatSigFig(p.market_capacity_base)} <span style="font-size: 0.85em; opacity: 0.6;">${pctCap}</span></td>
+			<td style="color: ${color(p.profit_per_base, 0, 150000)}">${formatSigFig(p.profit_per_base)}<br><span style="font-size: 0.85em; opacity: 0.6;">${pctProfit}</span></td>
+			<td><span style="color: ${color(p.break_even, 30, 3)}">${formatSigFig(p.break_even)}</span>d<br><span style="font-size: 0.85em; opacity: 0.6;">${pctBreak}</span></td>
+			<td style="color: ${color(p.capex_val, 3_000_000, 400_000)}">${formatSigFig(p.capex_val)}<br><span style="font-size: 0.85em; opacity: 0.6;">${pctCapex}</span></td>
+			<td style="color: ${color(p.opex_val, 400_000, 10_000)}">${formatSigFig(p.opex_val)}<br><span style="font-size: 0.85em; opacity: 0.6;">${pctOpex}</span></td>
+			<td style="color: ${color(p.normalized_logistics_per_base, 1.0, 0.1)}">${formatSigFig(p.logistics_per_base)} ${p.logistics_bottleneck}<br><span style="font-size: 0.85em; opacity: 0.6;">${pctLog}</span></td>
+			<td style="color: ${color(p.market_capacity_base, 0.04, 1)}">${formatSigFig(p.market_capacity_base)}<br><span style="font-size: 0.85em; opacity: 0.6;">${pctCap}</span></td>
 		`;
 
 		const output = tr.querySelector('td')!;