From 39490624359e4dd7155fa943e47445ad7a6dee0a Mon Sep 17 00:00:00 2001
From: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Sun, 10 May 2026 08:27:04 +0000
Subject: [PATCH] Add UI audit report

Catalogs systemic UI issues by pattern (root causes), what was already
fixed in this session, and prioritized recommendations for further work.

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

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 docs/ui/UI_AUDIT.md | 238 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 238 insertions(+)
 create mode 100644 docs/ui/UI_AUDIT.md

diff --git a/docs/ui/UI_AUDIT.md b/docs/ui/UI_AUDIT.md
new file mode 100644
index 0000000..8f7adf8
--- /dev/null
+++ b/docs/ui/UI_AUDIT.md
@@ -0,0 +1,238 @@
+# Trading Web UI Audit
+
+> **Last updated:** 2026-05-10
+> **Scope:** `learning_ai_invt_trdg/web/src` (~13,000 lines of UI code across views/tabs/components)
+> **Method:** Pattern-based grep audit + manual inspection of fixed components
+
+This doc catalogs UI issues by **pattern** (so you fix root causes, not symptoms), tells you **which files are affected**, and recommends **concrete fixes**.
+
+---
+
+## 1. Summary — what's the state of the codebase?
+
+| Metric | Count | Note |
+|---|---|---|
+| Files using `style={{...}}` inline blocks | 25 | A few have 50–72 blocks each — major drift source |
+| `!important` declarations in `index.css` | 122 | Indicates repeated style-override fights |
+| `<Button>` (primitive) usages | 31 files | Has known overlap-with-block-children issue (we hit it in Copilot) |
+| `<table>` direct usages | 6 files | Several without scroll containers |
+| Largest views | `PositionsTab` 2035, `SimpleView` 1635, `OverviewTab` 1061, `AdminTab` 990, `HomeView` 917 | High UI surface = high bug surface |
+
+The codebase has **pattern bugs**, not just one-off issues. The same root causes recur across files. Fixing them centrally (CSS overrides, lint rules) is much cheaper than file-by-file.
+
+---
+
+## 2. Already fixed in this session
+
+| # | Issue | Fix | Commit |
+|---|---|---|---|
+| 1 | Plans page: saved-setup cards clipped Edit/Delete buttons; chips truncated with ellipsis instead of wrapping; outer grid forced 380px on saved column | Refactored saved-setup-card to `overflow: visible`, flex-wrap topline, real chip wrap, single-column form below 1440px | `46a357c` |
+| 2 | Critical alert banner overflowed at narrow widths; loud red styling | Restructured into wrapper + inner row with min-width:0 text + shrink-0 CTA, max-width 1280px, soft tinted background | `1fa2bcd` |
+| 3 | Sidebar logo: "ByteLyst / Trading OS" clipped due to two competing CSS rules (44×44 grid vs 56px flex) | Forced flex layout with min-height 60px, brand text ellipsis-only | `1fa2bcd` |
+| 4 | AI Trading Copilot: Quick Action title and prompt overlapped; not responsive | Replaced `<Button>` with native `<button>` with explicit flex-column; responsive 1/2-col grid; line-clamp on prompt | `343ffb4` |
+| 5 | DevOps panel tables overflowed | Wrapped in `overflow-x: auto`, table-layout: fixed, break-word on cells | `d2420f5d` |
+| 6 | Global: `.dashboard-main { overflow: hidden }` clipped popovers/modals | `overflow: visible !important` | `f463ff6` |
+| 7 | Global: right panel covers main on narrow viewports | Collapses to 260px below 1280px, hidden below 1024px | `f463ff6` |
+| 8 | Global: tables push layout horizontally | `.dashboard-content table` wrapped with `overflow-x: auto` | `f463ff6` |
+| 9 | Global: header search/indices crowd each other | flex-wrap, search shrinks 240–360px, indices wrap | `f463ff6` |
+
+All centralized in `web/src/layout-fixes.css` (495 lines). Single file = single review surface.
+
+---
+
+## 3. Issue patterns (root causes)
+
+### Pattern A — `<Button>` primitive ate block children
+
+**Symptom:** Two `<span style={{display:block}}>` inside a `<Button>` overlap each other.
+**Root cause:** `<Button>` from `@bytelyst/ui` is `inline-flex` internally; block children get treated as inline-flex items.
+**Fix pattern:** Use native `<button>` with explicit `display: flex; flex-direction: column` for cards-as-buttons.
+**Where to look:** any `<Button>` containing 2+ stacked text spans/divs.
+
+```bash
+grep -rn "<Button" --include="*.tsx" web/src | wc -l    # 31 files
+```
+
+### Pattern B — Inline styles instead of classes
+
+**Symptom:** Style drift, no responsive breakpoints, can't override via CSS without `!important`.
+**Files:** `OverviewTab` (72 blocks), `MyStrategiesTab` (64), `HomeView` (55), `ChatControl` (28), `MembershipTab` (26), `MarketplaceTab` (23), `VisualRuleBuilder` (22).
+**Why bad:** Inline styles can't have `@media` queries, can't be tweaked via theme, fight `index.css` for specificity.
+**Fix pattern:** Lift repeated patterns into named CSS classes; keep one-off positional styles inline.
+
+### Pattern C — Hardcoded pixel widths in JSX
+
+**Symptom:** Doesn't shrink on narrow viewports → horizontal overflow.
+**Findings:**
+- `App.tsx:226` `maxWidth: 420` (toast container)
+- `Header.tsx:77` `width: 300` (search) — already fixed via CSS override
+- `MembershipTab.tsx:48,160` `width: 44`, `maxWidth: 1400`
+- `VisualRuleBuilder.tsx:111,326` `width: 70`, `width: 260`
+- `RightPanel.tsx:109` `width: 52, height: 44` (image — fine, intentional thumbnail)
+- `PositionsTab.tsx` multiple `truncate max-w-[80px/120px/180px/220px/260px]`
+
+**Fix pattern:** Replace fixed widths with flex/grid + `min-width: 0` + `flex: 0 1 <basis>`. For images, keep fixed but add `flex-shrink: 0`.
+
+### Pattern D — `overflow: hidden` on cards that have anchored children
+
+**Symptom:** Buttons, badges, dropdowns clipped.
+**Findings (current):**
+- `ReconciliationAuditPanel.tsx:447,509,579` — `<Card className="overflow-hidden rounded-2xl">` × 3
+- `AdminTab.tsx:372,608,843` — admin panel sections with overflow-hidden
+- `PositionsTab.tsx:1392,1578` — `table-container ... overflow-hidden` (this one is correct — it's the wrapper for a horizontal-scroll table)
+
+**Fix pattern:** Use `overflow: hidden` only when intentionally clipping (e.g. rounded corners over images). For cards that contain actionable children, prefer `overflow: visible` and let children manage their own bounds.
+
+### Pattern E — Truncation without `title` attribute
+
+**Symptom:** User sees "PKRBKDW7…" with no way to read the full value.
+**Findings:** 11 instances of `className="...truncate..."` without a sibling `title=` attribute (a11y + UX regression).
+**Fix pattern:** Always pair `truncate` with `title={value}` so hover/focus shows full content.
+
+### Pattern F — Grid templates without `minmax(0, 1fr)`
+
+**Symptom:** Grid children with content wider than `1fr` push past container.
+**Findings:**
+- `index.css:1230` `grid-template-columns: 2fr 1.2fr 1fr 1.2fr` (no minmax)
+- `index.css:1895` `grid-template-columns: repeat(3, 1fr)` (no minmax)
+- `index.css:2325` `grid-template-columns: 100px minmax(220px, 1fr) 90px ...` — fine
+- `MarketplaceTab.tsx:36,86`, `MembershipTab.tsx:100`, `MyStrategiesTab.tsx:127` — `gridTemplateColumns: '1fr 1fr'` inline
+
+**Fix pattern:** Always use `minmax(0, 1fr)` not bare `1fr` in grid templates. Default `min-width` is `auto` which equals `min-content` of children; minmax(0,...) lets the column shrink.
+
+### Pattern G — Two competing CSS rules for the same class
+
+**Symptom:** Styles you can't reason about; depends on rule order in 3000-line stylesheet.
+**Where seen:** `.trading-sidebar-logo` (44×44 grid block at line 349 + 56px flex block at line 1546). The logo bug we fixed was a direct consequence.
+**Likely more:** `index.css` has 122 `!important` declarations — each one suggests a fight between two rules. Worth a future cleanup pass.
+
+### Pattern H — `100vw` / `vw` units inside layouts with a fixed sidebar
+
+**Symptom:** Element widths don't subtract sidebar/scrollbar width → overflow.
+**Findings:**
+- `index.css:1620` `width: min(42vw, 460px) !important;`
+- `index.css:1791,1798,1822,1832` — `clamp(... vw ...)` for fluid typography (these are fine)
+- `ChatControl.tsx:635` `maxWidth: 'calc(100vw - 32px)'` (acceptable — modal portaled to body, no sidebar offset)
+- `TradeProfileManager.tsx:908` `max-w-[92vw]` (also portaled side-drawer — acceptable)
+
+**Fix pattern:** Inside the dashboard shell use `100%` not `100vw`. `vw` only safe for elements outside the sidebar layout (modals, banners).
+
+---
+
+## 4. High-impact components still to address
+
+### 4.1 PositionsTab.tsx (2035 lines, Portfolio page)
+
+**Issues:**
+- 6+ instances of `truncate max-w-[80–260px]` for trade IDs / sub-tags
+- `<table className="pro-table">` already has horizontal scroll wrapper, but the inner `pro-table` has hardcoded `min-width: 980px` — fine for desktop, but on narrow viewports the table scrolls within itself (correct behavior, by design)
+- 3 separate scroll regions (`.positions-section`, `.orders-section`, `.history-tab`) each with their own min-widths
+- Many badges with hardcoded font/padding via inline style
+
+**Recommendation:** Keep horizontal scroll behavior (it's correct for data tables). Add `title={fullValue}` to the 6 truncate instances that don't have it. Audit badge inline styles → lift to `.position-badge` class.
+
+### 4.2 OverviewTab.tsx (1061 lines, dashboard landing)
+
+**Issues:**
+- 72 inline `style={{...}}` blocks
+- Likely uses many `<Button>` with multiple-span content → potential overlap (Pattern A)
+- No responsive breakpoints in inline styles
+
+**Recommendation:** Highest-payoff refactor target. Move colors/spacing into Tailwind utilities or `.overview-*` classes. Estimated 3–4 hours for a clean pass.
+
+### 4.3 HomeView.tsx (917 lines, root /)
+
+**Issues:**
+- 55 inline style blocks
+- Hero panel uses `clamp(... vw ...)` for fluid typography — looks intentional
+- Action grid likely uses `gridTemplateColumns: '1fr 1fr'` (Pattern F)
+
+**Recommendation:** Same as OverviewTab — extract into classes. Verify mobile breakpoint for action grid (`grid-cols-1 md:grid-cols-2 xl:grid-cols-3`).
+
+### 4.4 TradeProfileManager.tsx (slide-over drawer)
+
+**Issues:**
+- Uses `w-[520px] max-w-[92vw]` — fixed width on desktop. May feel cramped for forms with many fields.
+- Drawer slides in from right, portaled to body (good).
+
+**Recommendation:** Consider `w-[640px]` on `xl:` breakpoint for more breathing room. Inspect the form layout for the same overlap-with-Button issue we saw in Copilot.
+
+### 4.5 ConfigTab.tsx + AdminTab.tsx tables
+
+**ConfigTab:**
+- `<th className="min-w-[200px/300px/400px]">` — guarantees horizontal scroll. Acceptable for a config table; user can scroll.
+
+**AdminTab:**
+- `max-h-[400px] overflow-y-auto` × 2 instances. Bounded height for log/audit panels — likely intentional.
+- `max-w-[260px]` truncate on token displays — good (these are secrets, full value isn't useful).
+
+**Recommendation:** No urgent fix. Both pages are admin-only and the scroll behavior is appropriate for their content density.
+
+### 4.6 ChatControl.tsx (Copilot, just fixed)
+
+Quick Actions block fixed (commit `343ffb4`). Remaining minor:
+- 28 inline-style blocks (background gradients, animations) — keep, they're animation-specific
+- Floating button portal styles — fine
+- Backdrop styles — fine
+
+**No further action needed.**
+
+---
+
+## 5. Recommendations
+
+### Immediate (1 commit, 1 hour)
+
+1. Add `title=` to the 11 untitled truncate instances. Quick a11y win.
+2. Add `minmax(0, 1fr)` to the 5 inline `gridTemplateColumns: '1fr 1fr'` instances in MarketplaceTab/MembershipTab/MyStrategiesTab. Prevents overflow when content gets long.
+3. Convert `<Button>` to native `<button>` in any Button that has 2+ block children inside (audit needed).
+
+### Short-term (1 week)
+
+4. **ESLint rules** (preventive):
+   - `tailwindcss/no-custom-classname` to catch inline arbitrary widths like `w-[80px]`
+   - Custom rule: `truncate` requires `title` (catches Pattern E)
+   - Custom rule: flag `gridTemplateColumns` containing bare `1fr` without `minmax`
+   - Custom rule: warn on inline `style` blocks with > 5 properties (encourage class extraction)
+5. **CSS audit:** scan `index.css` for class names with multiple definitions; consolidate. Aim to reduce `!important` count from 122 → < 60.
+
+### Medium-term (2-3 weeks)
+
+6. **Refactor OverviewTab + HomeView** to extract inline styles into a `home.css` / `overview.css` partial. Highest user impact (these are the landing pages).
+7. **Component primitives audit:** the `<Button>` overlap issue suggests `@bytelyst/ui` Button needs a documented prop for stacked children, or a separate `<CardButton>` primitive. Worth a discussion with the design system team.
+
+---
+
+## 6. Quick verification commands
+
+```bash
+# Check current state
+cd /opt/bytelyst/learning_ai_invt_trdg/web/src
+
+# Truncate without title
+grep -rn "truncate\b" --include='*.tsx' | grep -v test | grep -v "title=" | wc -l
+
+# Inline style blocks per file (drift indicator)
+for f in $(grep -rln "style={{" --include='*.tsx' | grep -v test); do
+  count=$(grep -c "style={{" "$f")
+  [ "$count" -gt 20 ] && echo "$count  $f"
+done | sort -rn
+
+# !important count
+grep -c "!important" index.css
+
+# Hardcoded pixel widths in JSX
+grep -rEn "(width|minWidth|maxWidth):\s*[0-9]+(px)?[,$]" --include='*.tsx' | grep -v test
+```
+
+---
+
+## 7. Files changed in recent UI fix sweep
+
+- `web/src/layout-fixes.css` (new, 495 lines) — all global UI overrides centralized
+- `web/src/main.tsx` — imports layout-fixes.css
+- `web/src/App.tsx` — refactored alert banner JSX
+- `web/src/components/ChatControl.tsx` — refactored Quick Actions
+- `web/src/components/layout/AppShell.tsx` — added /devops redirect
+
+The single-file approach (`layout-fixes.css`) is intentional: every global UI fix lands there with a numbered section + comment explaining the issue. Easy to review, easy to revert one section without touching others.