From e5232c2af35e809ad6794030808c055222e02fe7 Mon Sep 17 00:00:00 2001
From: Christian <christian@p20.dev>
Date: Thu, 15 Oct 2026 23:22:15 +0200
Subject: [PATCH] fix(ui): clarify logistics and facility lead effects on
 cards, prevent line breaks in liquidation and buttons

---
 frontend/css/style.css           | 44 ++++++++++++++++++++++++++------
 frontend/js/ui/inspectorView.js  | 10 ++++++--
 frontend/js/ui/productionView.js | 32 ++++++++++++++---------
 3 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/frontend/css/style.css b/frontend/css/style.css
index 05a50e1..7af0fdc 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -615,7 +615,7 @@ body {
 
 .production-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
     gap: 16px;
 }
 
@@ -628,7 +628,7 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    min-height: 410px;
+    min-height: 420px;
     gap: 12px;
     cursor: pointer;
     transition: border-color 0.2s, box-shadow 0.2s;
@@ -879,6 +879,7 @@ body {
     font-size: 0.78rem;
     font-weight: 700;
     cursor: pointer;
+    white-space: nowrap;
     transition: background 0.15s, opacity 0.15s;
 }
 
@@ -905,6 +906,7 @@ body {
     font-size: 0.78rem;
     font-weight: 700;
     cursor: pointer;
+    white-space: nowrap;
 }
 
 .btn-corp-action:hover {
@@ -924,6 +926,7 @@ body {
     font-weight: 600;
     color: var(--text-primary);
     cursor: pointer;
+    white-space: nowrap;
 }
 
 .btn-corp-secondary:hover:not(:disabled) {
@@ -945,6 +948,7 @@ body {
     font-weight: 700;
     padding: 6px 10px;
     border-radius: var(--radius-sm);
+    white-space: nowrap;
 }
 
 /* ==========================================================================
@@ -1443,13 +1447,30 @@ body {
 
 .liquidation-buttons {
     display: flex;
+    flex-direction: column;
     gap: 8px;
 }
 
 .liquidation-buttons button {
-    flex: 1;
-    font-size: 0.75rem;
-    padding: 8px 6px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.78rem;
+    padding: 8px 12px;
+    white-space: nowrap;
+}
+
+.liquidation-btn-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 700;
+}
+
+.liquidation-btn-val {
+    font-family: var(--font-mono);
+    font-weight: 700;
 }
 
 .chain-box {
@@ -1478,7 +1499,7 @@ body {
 .chain-items {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 6px;
 }
 
 .chain-item-row {
@@ -1487,10 +1508,11 @@ body {
     align-items: center;
     background: var(--bg-surface);
     border: 1px solid var(--border-color);
-    padding: 6px 8px;
+    padding: 8px 10px;
     border-radius: var(--radius-sm);
     cursor: pointer;
     transition: background 0.15s;
+    gap: 10px;
 }
 
 .chain-item-row:hover {
@@ -1503,11 +1525,17 @@ body {
     gap: 6px;
     font-size: 0.78rem;
     font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
 }
 
 .chain-item-ratio {
-    font-size: 0.7rem;
+    font-size: 0.72rem;
     color: var(--text-muted);
+    white-space: nowrap;
+    flex-shrink: 0;
 }
 
 .chain-badge {
diff --git a/frontend/js/ui/inspectorView.js b/frontend/js/ui/inspectorView.js
index cf6cadd..c70396e 100644
--- a/frontend/js/ui/inspectorView.js
+++ b/frontend/js/ui/inspectorView.js
@@ -60,10 +60,16 @@ export function mountInspector(container, state, onAction) {
                 <p class="section-subtext">Liquidate stockpiles immediately onto the wholesale spot market.</p>
                 <div class="liquidation-buttons">
                     <button class="btn-corp-secondary" id="insp-btn-half" data-product="${product.id}" ${pState.stock >= 2 ? '' : 'disabled'}>
-                        Sell 50% (<span id="insp-val-half">${fmtCurrency(halfLiquidationValue)}</span>)
+                        <span class="liquidation-btn-label">
+                            <iconify-icon icon="lucide:pie-chart"></iconify-icon> Sell 50%
+                        </span>
+                        <span class="liquidation-btn-val" id="insp-val-half">${fmtCurrency(halfLiquidationValue)}</span>
                     </button>
                     <button class="btn-primary-corp" id="insp-btn-all" data-product="${product.id}" ${pState.stock >= 1 ? '' : 'disabled'}>
-                        Sell 100% (<span id="insp-val-all">${fmtCurrency(totalLiquidationValue)}</span>)
+                        <span class="liquidation-btn-label">
+                            <iconify-icon icon="lucide:check-circle-2"></iconify-icon> Sell 100%
+                        </span>
+                        <span class="liquidation-btn-val" id="insp-val-all">${fmtCurrency(totalLiquidationValue)}</span>
                     </button>
                 </div>
             </div>
diff --git a/frontend/js/ui/productionView.js b/frontend/js/ui/productionView.js
index 0812d52..e0a2939 100644
--- a/frontend/js/ui/productionView.js
+++ b/frontend/js/ui/productionView.js
@@ -267,7 +267,7 @@ export function mountProductionFloor(container, state, onAction, engine) {
                         <span class="stat-value font-mono"><strong id="stock-${p.id}">${fmtNum(pState.stock, 0)}</strong> ${p.unit}</span>
                     </div>
                     <div class="stat-cell">
-                        <span class="stat-label">Output Velocity:</span>
+                        <span class="stat-label">Production Output:</span>
                         <span class="stat-value font-mono ${rates.isBottlenecked ? 'text-warning' : 'text-profit'}" id="rate-units-${p.id}">
                             ${rates.isBottlenecked ? '0.0 (Paused)' : `${fmtNum(rates.prodRate, 1)}/s`}
                         </span>
@@ -280,9 +280,9 @@ export function mountProductionFloor(container, state, onAction, engine) {
                         <span class="stat-label">Wholesale Price:</span>
                         <span class="stat-value font-mono">${fmtCurrency(p.basePrice)}</span>
                     </div>
-                    <div class="stat-cell">
-                        <span class="stat-label">Logistics Fleet:</span>
-                        <span class="stat-value font-mono" id="logistics-${p.id}">${pState.logistics || 0} fleets</span>
+                    <div class="stat-cell" title="Logistics fleets automatically sell stockpiled goods continuously onto the wholesale market (0.75 units/sec per fleet)">
+                        <span class="stat-label">Logistics Auto-Sell:</span>
+                        <span class="stat-value font-mono" id="logistics-${p.id}">${pState.logistics || 0} fleets (${fmtNum((pState.logistics || 0) * 0.75, 2)}/s)</span>
                     </div>
                     <div class="stat-cell">
                         <span class="stat-label">Milestone Eff:</span>
@@ -294,30 +294,30 @@ export function mountProductionFloor(container, state, onAction, engine) {
 
                 <!-- Facility Actions Bar -->
                 <div class="facility-actions-row">
-                    <button class="btn-corp-action btn-cycle" data-product="${p.id}" title="Trigger manual batch">
+                    <button class="btn-corp-action btn-cycle" data-product="${p.id}" title="Run 1 manual production cycle">
                         <iconify-icon icon="lucide:play"></iconify-icon>
                         <span>Run Batch</span>
                     </button>
                     
-                    <button class="btn-primary-corp btn-expand" id="btn-expand-${p.id}" data-product="${p.id}" ${canAffordBuy ? '' : 'disabled'}>
+                    <button class="btn-primary-corp btn-expand" id="btn-expand-${p.id}" data-product="${p.id}" ${canAffordBuy ? '' : 'disabled'} title="Add more production lines to increase output volume">
                         <iconify-icon icon="lucide:plus-circle"></iconify-icon>
                         <span id="btn-expand-text-${p.id}">+${calc.count} Lines (${fmtCurrency(calc.cost)})</span>
                     </button>
 
                     ${!pState.manager ? `
-                        <button class="btn-corp-secondary btn-hire-mgr" id="btn-hire-${p.id}" data-product="${p.id}" ${canAffordManager ? '' : 'disabled'} title="Automates production continuously">
+                        <button class="btn-corp-secondary btn-hire-mgr" id="btn-hire-${p.id}" data-product="${p.id}" ${canAffordManager ? '' : 'disabled'} title="Hires a Facility Lead who automatically runs production continuously without clicking">
                             <iconify-icon icon="lucide:user-check"></iconify-icon>
                             <span>Hire Lead (${fmtCurrency(managerCost)})</span>
                         </button>
                     ` : `
-                        <span class="mgr-hired-badge" title="Automated Lead Active">
-                            <iconify-icon icon="lucide:bot"></iconify-icon> Auto
+                        <span class="mgr-hired-badge" title="Facility Lead hired: 100% automated continuous production active">
+                            <iconify-icon icon="lucide:bot"></iconify-icon> <span>Lead Active (Auto)</span>
                         </span>
                     `}
 
-                    <button class="btn-corp-secondary btn-expand-logistics" id="btn-logistics-${p.id}" data-product="${p.id}" ${canAffordLogistics ? '' : 'disabled'} title="Increase passive sales capacity">
+                    <button class="btn-corp-secondary btn-expand-logistics" id="btn-logistics-${p.id}" data-product="${p.id}" ${canAffordLogistics ? '' : 'disabled'} title="Deploys an automated distribution fleet (+0.75 units/sec passive wholesale sales)">
                         <iconify-icon icon="lucide:truck"></iconify-icon>
-                        <span id="btn-logistics-text-${p.id}">+Logistics (${fmtCurrency(logisticsCost)})</span>
+                        <span id="btn-logistics-text-${p.id}">+Fleet (${fmtCurrency(logisticsCost)})</span>
                     </button>
                 </div>
             </div>
@@ -474,7 +474,8 @@ export function updateProductionFloor(container, state, engine) {
 
         const elLogistics = document.getElementById(`logistics-${p.id}`);
         if (elLogistics) {
-            const logText = `${pState.logistics || 0} fleets`;
+            const count = pState.logistics || 0;
+            const logText = `${count} fleets (${fmtNum(count * 0.75, 2)}/s)`;
             if (elLogistics.textContent !== logText) {
                 elLogistics.textContent = logText;
             }
@@ -556,6 +557,13 @@ export function updateProductionFloor(container, state, engine) {
             if (elBtnLogistics.disabled !== !canAfford) {
                 elBtnLogistics.disabled = !canAfford;
             }
+            const elBtnLogisticsText = document.getElementById(`btn-logistics-text-${p.id}`);
+            if (elBtnLogisticsText) {
+                const text = `+Fleet (${fmtCurrency(logisticsCost)})`;
+                if (elBtnLogisticsText.textContent !== text) {
+                    elBtnLogisticsText.textContent = text;
+                }
+            }
         }
 
         // Selected Card class