From 3375dfcfce623fa6ba911e66e91a71437aa95fb2 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Fri, 8 May 2026 21:33:59 -0700
Subject: [PATCH] fix(ui): polish portfolio operations tables

---
 web/src/index.css             | 167 ++++++++++++++++++++++++++++++++--
 web/src/tabs/PositionsTab.tsx |  18 ++--
 2 files changed, 169 insertions(+), 16 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index b093a39..f8a6e93 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1800,23 +1800,33 @@ body {
   gap: 7px;
 }
 
-.positions-tab {
+.positions-tab,
+.history-tab {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
   color: var(--foreground);
 }
 
-.positions-tab .tab-header {
+.positions-tab .tab-header,
+.history-tab > div:first-child {
   margin-bottom: 0;
 }
 
 .positions-tab .tab-header h2,
-.positions-tab h3 {
+.positions-tab h3,
+.history-tab h2,
+.history-tab h3 {
   color: var(--foreground) !important;
   letter-spacing: 0 !important;
 }
 
 .positions-tab .tab-header p,
+.history-tab p,
 .positions-tab .text-gray-400,
-.positions-tab .text-gray-500 {
+.positions-tab .text-gray-500,
+.history-tab .text-gray-400,
+.history-tab .text-gray-500 {
   color: var(--muted-foreground) !important;
 }
 
@@ -1844,36 +1854,173 @@ body {
 }
 
 .positions-section,
-.orders-section {
+.orders-section,
+.history-tab {
   min-width: 0;
 }
 
-.positions-tab .table-container {
+.positions-tab section,
+.positions-tab header,
+.history-tab section {
+  max-width: 100%;
+}
+
+.positions-section > .flex,
+.orders-section > .flex {
+  min-width: 0;
+  align-items: center;
+}
+
+.positions-tab .table-container,
+.history-tab .table-container {
+  width: 100%;
+  max-width: 100%;
   overflow-x: auto !important;
   border-color: var(--border) !important;
   background: var(--card) !important;
   box-shadow: 0 14px 38px rgba(15, 23, 42, 0.05);
 }
 
-.positions-tab .pro-table {
+.positions-tab .pro-table,
+.history-tab .pro-table {
   min-width: 980px;
   color: var(--foreground);
+  border-collapse: separate;
+  border-spacing: 0;
 }
 
-.positions-tab .pro-table thead tr {
+.positions-tab .pro-table thead tr,
+.history-tab .pro-table thead tr {
   background: var(--muted) !important;
 }
 
-.positions-tab .pro-table th {
+.positions-tab .pro-table th,
+.history-tab .pro-table th {
   color: var(--muted-foreground) !important;
   white-space: nowrap;
 }
 
-.positions-tab .pro-table td {
+.positions-tab .pro-table td,
+.history-tab .pro-table td {
   color: var(--foreground);
   border-color: var(--border) !important;
 }
 
+.positions-tab .pro-table td > span[class*="px-"],
+.history-tab .pro-table td > span[class*="px-"] {
+  display: inline-flex;
+  min-height: 24px;
+  align-items: center;
+  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border)) !important;
+  border-radius: 999px !important;
+  background: color-mix(in oklab, var(--accent-soft) 38%, var(--card)) !important;
+  color: var(--foreground) !important;
+  padding: 0 8px !important;
+  font-size: 10px !important;
+  font-weight: 800 !important;
+  letter-spacing: 0 !important;
+  text-transform: none !important;
+  white-space: nowrap;
+}
+
+.positions-tab .pro-table tbody tr,
+.history-tab .pro-table tbody tr {
+  background: transparent !important;
+}
+
+.positions-tab .pro-table tbody tr:hover,
+.history-tab .pro-table tbody tr:hover {
+  background: color-mix(in oklab, var(--accent-soft) 35%, transparent) !important;
+}
+
+.positions-tab .text-white,
+.positions-tab .text-gray-200,
+.positions-tab .text-gray-300,
+.history-tab .text-white,
+.history-tab .text-gray-200,
+.history-tab .text-gray-300 {
+  color: var(--foreground) !important;
+}
+
+.positions-tab .text-zinc-400,
+.positions-tab .text-zinc-500,
+.positions-tab .text-zinc-600,
+.positions-tab .text-zinc-700,
+.history-tab .text-zinc-400,
+.history-tab .text-zinc-500,
+.history-tab .text-zinc-600,
+.history-tab .text-zinc-700 {
+  color: var(--muted-foreground) !important;
+}
+
+.truth-pill,
+.portfolio-row-action {
+  display: inline-flex;
+  min-height: 26px;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--muted) 60%, var(--card));
+  color: var(--muted-foreground);
+  padding: 0 10px;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.truth-pill.reconciled {
+  border-color: color-mix(in oklab, var(--bl-success) 28%, var(--border));
+  background: var(--bl-success-muted);
+  color: var(--bl-success);
+}
+
+.truth-pill.exchange {
+  border-color: color-mix(in oklab, var(--bl-info) 28%, var(--border));
+  background: var(--bl-info-muted);
+  color: var(--bl-info);
+}
+
+.truth-pill.db,
+.truth-pill.unknown {
+  color: var(--muted-foreground);
+}
+
+.portfolio-row-action {
+  min-height: 30px !important;
+  border-radius: 999px !important;
+  padding-inline: 10px !important;
+  font-size: 10px !important;
+  font-weight: 800 !important;
+  text-transform: none !important;
+}
+
+@media (max-width: 560px) {
+  .positions-tab > header {
+    padding: 18px;
+  }
+
+  .positions-tab .tab-header p {
+    overflow-wrap: anywhere;
+  }
+
+  .positions-tab .rounded-xl.border {
+    overflow-wrap: anywhere;
+  }
+
+  .positions-section > .flex,
+  .orders-section > .flex {
+    flex-wrap: wrap;
+  }
+
+  .positions-tab .pro-table,
+  .history-tab .pro-table {
+    min-width: 900px;
+  }
+}
+
 /* Tablet should keep the side navigation. Only true phone widths use footer nav. */
 @media (min-width: 561px) and (max-width: 1023px) {
   .dashboard-shell {
diff --git a/web/src/tabs/PositionsTab.tsx b/web/src/tabs/PositionsTab.tsx
index f288a56..7d28bb3 100644
--- a/web/src/tabs/PositionsTab.tsx
+++ b/web/src/tabs/PositionsTab.tsx
@@ -1509,15 +1509,19 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
                                         <td className="px-6 py-4 text-right">
                                             <div className="flex items-center justify-end gap-2">
                                                 {pos.source === 'BOT' && pos.profileId && pos.tradeId && onManageHolding && (
-                                                    <button
+                                                    <Button
+                                                        type="button"
                                                         onClick={() => onManageHolding(pos, pos.planEntryId ? 'open-plan' : 'create-exit-plan')}
-                                                        className="px-2 py-1 bg-sky-500/10 hover:bg-sky-500/20 text-sky-300 border border-sky-500/20 rounded text-[10px] font-bold uppercase transition-colors"
+                                                        variant="outline"
+                                                        size="sm"
+                                                        className="portfolio-row-action"
                                                     >
                                                         {pos.planEntryId ? 'Open Plan' : 'Create Exit Plan'}
-                                                    </button>
+                                                    </Button>
                                                 )}
                                                 {pos.source === 'BOT' && (
-                                                    <button
+                                                    <Button
+                                                        type="button"
                                                         onClick={async () => {
                                                             if (!confirm(`Are you sure you want to CLOSE ${pos.symbol}?`)) return;
                                                             try {
@@ -1544,10 +1548,12 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
                                                                 alert(`Error: ${e.message}`);
                                                             }
                                                         }}
-                                                        className="px-2 py-1 bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20 rounded text-[10px] font-bold uppercase transition-colors"
+                                                        variant="destructive"
+                                                        size="sm"
+                                                        className="portfolio-row-action"
                                                     >
                                                         Square Off
-                                                    </button>
+                                                    </Button>
                                                 )}
                                             </div>
                                         </td>