From 1807dc0d3077054cabc885367ebc38df81b72b8d Mon Sep 17 00:00:00 2001
From: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Sun, 10 May 2026 08:59:22 +0000
Subject: [PATCH] fix(web): grid minmax(0,1fr) + safer header search width (UI
 audit #2-4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.css :1230 .right-panel-table-* — wrap all four 1fr/1.2fr/2fr columns
  in minmax(0, ...) so cell content can't push the row past container width
- index.css :1620 .trading-header-search — replace `width: min(42vw, 460px)
  !important` with `flex: 1 1 240px; min-width: 0; max-width: 460px`. vw
  units include the sidebar/scrollbar; flex-basis respects the header's
  actual flex container.
- index.css :1895 .home-preview-stats — repeat(3, minmax(0, 1fr))
- 5 inline gridTemplateColumns '1fr 1fr' in MarketplaceTab (x2),
  MembershipTab (x1), MyStrategiesTab (x2) → 'minmax(0, 1fr) minmax(0, 1fr)'

Addresses Pattern F + Pattern H in docs/ui/UI_AUDIT.md.

Generated with [Devin](https://cli.devin.ai/docs)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 web/src/index.css                | 10 +++++++---
 web/src/tabs/MarketplaceTab.tsx  |  4 ++--
 web/src/tabs/MembershipTab.tsx   |  2 +-
 web/src/tabs/MyStrategiesTab.tsx |  4 ++--
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index 1ded27c..376dba4 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1227,7 +1227,7 @@ body {
 .right-panel-table-head,
 .right-panel-table-row {
   display: grid;
-  grid-template-columns: 2fr 1.2fr 1fr 1.2fr;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr);
   gap: 4px;
   align-items: center;
 }
@@ -1617,7 +1617,11 @@ body {
 }
 
 .trading-header-search {
-  width: min(42vw, 460px) !important;
+  /* relative to header flex item, not viewport — avoids overflow when sidebar
+     is fixed and scrollbar consumes viewport width */
+  flex: 1 1 240px;
+  min-width: 0;
+  max-width: 460px;
 }
 
 .trading-header-search input {
@@ -1892,7 +1896,7 @@ body {
 
 .home-preview-stats {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
   padding: 0 18px 18px;
 }
diff --git a/web/src/tabs/MarketplaceTab.tsx b/web/src/tabs/MarketplaceTab.tsx
index ad6ecd7..3885a67 100644
--- a/web/src/tabs/MarketplaceTab.tsx
+++ b/web/src/tabs/MarketplaceTab.tsx
@@ -33,7 +33,7 @@ export const MarketplaceTab: React.FC<MarketplaceTabProps> = ({ onClone, botStat
             {/* Contextual Intelligence Row */}
             <div style={{
                 display: 'grid',
-                gridTemplateColumns: '1fr 1fr',
+                gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
                 gap: '20px',
                 maxWidth: '1400px',
                 margin: '24px auto 0 auto',
@@ -83,7 +83,7 @@ export const MarketplaceTab: React.FC<MarketplaceTabProps> = ({ onClone, botStat
                             <div style={{ fontSize: '10px', color: 'var(--muted-foreground)', fontWeight: 700, marginTop: '1px' }}>Most active markets — match with strategies below</div>
                         </div>
                     </div>
-                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' }}>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: '8px' }}>
                         {topVolatile.map(s => {
                             const change = botState.symbols[s]?.change24h || 0;
                             return (
diff --git a/web/src/tabs/MembershipTab.tsx b/web/src/tabs/MembershipTab.tsx
index 0106b7a..5aa6bf6 100644
--- a/web/src/tabs/MembershipTab.tsx
+++ b/web/src/tabs/MembershipTab.tsx
@@ -97,7 +97,7 @@ const PlanCard: React.FC<{
 
                 <div style={{
                     display: 'grid',
-                    gridTemplateColumns: '1fr 1fr',
+                    gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
                     gap: 14,
                     marginBottom: 28
                 }}>
diff --git a/web/src/tabs/MyStrategiesTab.tsx b/web/src/tabs/MyStrategiesTab.tsx
index 6df4fa8..d82a565 100644
--- a/web/src/tabs/MyStrategiesTab.tsx
+++ b/web/src/tabs/MyStrategiesTab.tsx
@@ -124,7 +124,7 @@ const ActiveStrategyCard: React.FC<{
             </div>
 
             {/* 4. Operational DNA (Specs) */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px', marginBottom: '28px' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: '14px', marginBottom: '28px' }}>
                 {[
                     { label: 'Allocation', value: `$${profile.allocated_capital.toLocaleString()}`, icon: <DollarSign size={14} />, color: 'var(--bl-success)' },
                     { label: 'PnL (Global)', value: '$0.00', icon: <TrendingUp size={14} />, color: 'var(--bl-info-strong)' },
@@ -364,7 +364,7 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
                     .sort((a, b) => Math.abs(b.change) - Math.abs(a.change));
 
                 return (
-                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '48px' }}>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: '20px', marginBottom: '48px' }}>
                         {/* Recent Activity */}
                         <div style={{ background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', borderRadius: '24px', padding: '24px 28px' }}>
                             <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>