[STYLE] 21 remaining inline styles in 12 files — audit needed for Tailwind migration

[Delqhi]

Problem

After the migration in commit 0399151a, 21 inline styles remain across 12 files. All are classified as Type-D runtime values (computed from props/state) and cannot be expressed as static Tailwind classes.

Files with remaining inline styles

src/components/Modals/ManageWorkspace/Documents/Directory/ContextMenu/index.tsx
src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/EmbeddingFileRow.jsx
src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomCell.tsx
src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.tsx
src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.tsx
src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.tsx
src/components/WorkspaceChat/ChatContainer/ChatHistory/ClarifyingQuestion/index.tsx
src/components/WorkspaceChat/ChatContainer/ChatHistory/ToolApprovalRequest/index.tsx
src/components/WorkspaceChat/ChatContainer/MemoriesSidebar/MemoryCard/CardMenu/index.tsx
src/components/WorkspaceChat/ChatContainer/PromptInput/ToolsMenu/index.tsx
src/components/WorkspaceChat/ChatContainer/PromptInput/ToolsMenu/Tabs/SlashCommands/SlashCommandRow/index.tsx
src/pages/GeneralSettings/MobileConnections/ConnectionModal/index.jsx

Audit

For each remaining style={{...}}, determine:

1. Can it be converted to Tailwind arbitrary values? (e.g., max-w-[px])
2. Is it truly dynamic (computed at runtime)?
3. Can it be a CSS variable with var(--name)?
4. Should it stay as style={{}}?

Document each in docs/INLINE-STYLES-AUDIT.md and apply fixes.

Acceptance Criteria

• All 21 inline styles audited
• Each categorized: "convertible" | "dynamic-required" | "acceptable-as-style"
• Maximum possible converted to Tailwind utilities
• ESLint rule updated to allow only "acceptable-as-style" patterns
• docs/INLINE-STYLES-AUDIT.md updated

Aufwand

~2-3h

Related

• add tts provider nvidia nim  #65 (closed): Inline styles migration — 118/142 done
• Phase 3.1: useDocuments Hook + 25 components migration #87 (open): P0 BLOCKER — also caused by inline style migration

[Delqhi]

✅ PARTIALLY ADDRESSED in commit b7bcfef

What was the issue:
21+ inline style attributes (style={{ ... }}) across the codebase that should ideally be migrated to Tailwind utility classes for consistency and maintainability.

What was done:

• Converted (1): frontend/src/components/Sidebar/index.tsx - style={{ marginRight: "-3px" }} → Tailwind class -mr-[3px]
• Annotated (7): Added // Dynamic: ... comments explaining why these inline styles are kept (all are dynamic/runtime values that can't be pure Tailwind):
  • EmbeddingFileRow.jsx - template literal width ${pct}%
  • Citation/index.tsx (3 instances) - variable size prop on SVG elements
  • DefaultChat/index.tsx - conditional ternary isMobile ? "100%" : ...
  • ToolsMenu/index.tsx - viewport-computed maxHeight
  • ContextMenu/index.tsx - click-coordinate positioning
  • CustomTooltip.tsx - chart legend color prop (dynamic)

Remaining scope: ~50+ files still contain inline styles, but all are dynamic (template literals, runtime variables, ternary conditions, viewport calculations, or recharts SVG axes). Only 1 static inline style was found and converted.

Recommendation: Consider this issue closed for static styles. Dynamic inline styles are a fundamental architectural pattern for runtime values and don't need migration.

[Delqhi]

Update AddSourceMenu

Mit Commit 63bbec4 wurde auf v0-Style mit Tailwind-Utility-Klassen umgestaltet (abgerundete Container, muted Icons, Hover-States, Chevrons). Die Inline-Styles wurden dabei durch Tailwind-Klassen ersetzt.

Auch wurde auf 18 Tests erweitert (Keyboard-Navigation, Accessibility, Click-Outside, Submenu, GitHub/Bitbucket Rows).

[Delqhi]

Update — Issue #111 resolved

I have converted all 21 inline styles across the 12 files listed in this issue to Tailwind utility classes + CSS custom properties (or to 3rd-party component props where appropriate). The AddSourceMenu component was left untouched as requested.

Summary

• 21 inline styles converted — none remain as non-CSS-variable style={{...}} in the 12 target files.
• 17 now use style={{ "--...": value }} together with Tailwind arbitrary-value classes like w-[var(--...)], top-[var(--...)], bg-[var(--...)], etc.
• 4 Recharts axis styles were removed from style and moved into the tick prop object.
• Component behavior was not changed.

Files touched

1. src/components/Modals/ManageWorkspace/Documents/Directory/ContextMenu/index.tsx
2. src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/EmbeddingFileRow.jsx
3. src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomCell.tsx
4. src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.tsx
5. src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.tsx
6. src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.tsx
7. src/components/WorkspaceChat/ChatContainer/ChatHistory/ClarifyingQuestion/index.tsx
8. src/components/WorkspaceChat/ChatContainer/ChatHistory/ToolApprovalRequest/index.tsx
9. src/components/WorkspaceChat/ChatContainer/MemoriesSidebar/MemoryCard/CardMenu/index.tsx
10. src/components/WorkspaceChat/ChatContainer/PromptInput/ToolsMenu/index.tsx
11. src/components/WorkspaceChat/ChatContainer/PromptInput/ToolsMenu/Tabs/SlashCommands/SlashCommandRow/index.tsx
12. src/pages/GeneralSettings/MobileConnections/ConnectionModal/index.jsx

Plus frontend/eslint.config.js (new inlineStyles/css-vars-only rule) and docs/INLINE-STYLES-AUDIT.md (updated audit table).

Verification

• npm run build in frontend/ ✅
• npm run test in frontend/ ✅ — 183 test files, 1260 tests passed
• ESLint on the 12 modified files: no new errors, no inlineStyles/css-vars-only warnings (0 errors, 82 pre-existing warnings)

Recommendation

Issue #111 can be closed. All targeted inline styles are gone from the 12 files, and the ESLint rule now enforces the accepted pattern (CSS variables only). Remaining inline styles elsewhere are out of scope for this issue.

[Delqhi]

Inline-Styles migriert

Mit Commit 8c09ae8 wurden die 21 verbleibenden Inline-Styles in den 12 Dateien aus diesem Issue auf Tailwind-Utility-Klassen + CSS-Variablen umgestellt. Die ESLint-Regel in erlaubt nun nur noch Inline-Styles mit CSS-Custom-Properties. Issue wird geschlossen.