improvements #60

New issue

Open

opened 2026-07-19 10:40:21 +00:00 by theis · 0 comments

theis commented

2026-07-19 10:40:21 +00:00

Owner

Modularize the CSS. index.css is now ~1,230 lines of monolithic styles. Consider splitting it into logical files (e.g., base.css, layout.css, components.css, forms.css) or adopting CSS Modules / Tailwind to keep the design system maintainable as the app grows.
Avoid global element selectors. Rules like input, select, textarea, button, table, th, td apply to every element of that type across the app. Scope them to a class (e.g., .form-input, .data-table) to prevent unintended leakage when new third-party components or features are added.
Standardize form actions. Several forms use btn-ghost for Cancel while the Locations inline form still uses an unstyled button for Cancel. Align all cancel actions.
Add Storybook or visual regression tests. A large UI refactor is exactly the right time to introduce visual regression testing so future PRs don't accidentally regress the new design.
Document the design tokens. The CSS variables in :root are well-named; consider adding a short markdown reference or comments so future contributors know which token to use for new components.
Consider useMemo cost in ProjectDetail. The allocation memo recomputes on every keystroke in the quantity inputs because allocQty is a dependency. Verify whether this is noticeable with large stashes, and debounce or split the derived data if needed.

Modularize the CSS. index.css is now ~1,230 lines of monolithic styles. Consider splitting it into logical files (e.g., base.css, layout.css, components.css, forms.css) or adopting CSS Modules / Tailwind to keep the design system maintainable as the app grows. Avoid global element selectors. Rules like input, select, textarea, button, table, th, td apply to every element of that type across the app. Scope them to a class (e.g., .form-input, .data-table) to prevent unintended leakage when new third-party components or features are added. Standardize form actions. Several forms use btn-ghost for Cancel while the Locations inline form still uses an unstyled button for Cancel. Align all cancel actions. Add Storybook or visual regression tests. A large UI refactor is exactly the right time to introduce visual regression testing so future PRs don't accidentally regress the new design. Document the design tokens. The CSS variables in :root are well-named; consider adding a short markdown reference or comments so future contributors know which token to use for new components. Consider useMemo cost in ProjectDetail. The allocation memo recomputes on every keystroke in the quantity inputs because allocQty is a dependency. Verify whether this is noticeable with large stashes, and debounce or split the derived data if needed.