Mobile css improvements

[lxm7]

No description provided.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​radix-ui/​react-switch@​1.2.6

View full report

[claude]

PR Review: Mobile CSS Improvements

Thank you for this comprehensive PR! I've completed a thorough review covering code quality, performance, security, and best practices.

🎯 Summary

• Stats: +906 additions, -680 deletions across 56 files
• Focus: Mobile UI improvements, new card-based views, CSS migrations to OKLCH

🐛 Critical Issues

1. Typo in Component Directory Name

Location: src/components/CateoryPill/index.tsx

• Directory named CateoryPill should be CategoryPill
• Fix this spelling error for consistency

2. XSS Risk in Tooltip (Security)

Location: src/components/ArticleAnalyser/index.tsx:1016-1030

• Using innerHTML with user content is dangerous
• Replace with React rendering or use createPortal from react-dom
• Priority: HIGH

3. Hardcoded Analytics Dependency

Location: Multiple (lines 280, 1045, 1276)

• Direct window.gtag access creates tight coupling
• Extract to utility function with proper TypeScript types

⚡ Performance Concerns

Canvas Rendering

• draw() called frequently during zoom
• Consider requestAnimationFrame for smoother rendering
• Cache text measurements to avoid repeated measureText calls

Bundle Size

• D3.js addition increases bundle significantly
• Consider code-splitting and lazy loading the treemap view
• Use tree-shaking to import only needed D3 modules

Re-render Optimization

• filteredPosts recalculates on every search/category change
• Add debouncing to search input (300ms recommended)

📦 Code Quality

Component Size (1,484 lines)

The ArticleAnalyser file is too large. Recommend splitting into:

• CardMobileView.tsx
• WBAMobileView.tsx
• ArticleTreeMap.tsx
• SearchInput.tsx
• ViewToggle.tsx
• hooks/ directory for custom hooks
• utils/ for color/node utilities

Magic Numbers

Move constants to configuration:

• headerHeight = 60
• TARGET_NODE_COUNT = 40
• threshold = 25

Commented Code

Remove or use feature flags for:

• Lines 102-116: Filter button
• Lines 338-381: Hero section
• Lines 1389-1434: Search container

Color System Issue

Location: src/utilities/getPillColour.ts:21-23

Current: title.length % BRAND_COLORS.length

This gives same color to categories with equal length. Use proper hash function instead.

🎨 CSS/Styling

OKLCH Migration - Excellent!

Great move to OKLCH for perceptual uniformity. However:

• Not all browsers support OKLCH (Safari 15+, Chrome 111+)
• Add RGB/HSL fallbacks for older browsers

Hardcoded Colors

Replace with CSS variables:

• bg-[#0d1117] at line 303
• Palette array at line 721-722

📱 Mobile Responsiveness

Positive:

• Great responsive breakpoints
• Touch-friendly sizing
• Proper viewport calculations

Issue:

• ViewToggle fixed positioning may overlap system UI
• Consider safe-area-inset for notched devices

🧪 Test Coverage

Missing tests for:

• CategoryPill component
• Color logic in getPillColour
• CardMobileView filtering
• ArticleTreeMap zoom behavior

✅ Positive Highlights

1. Excellent TypeScript type safety
2. Good accessibility foundation with ARIA labels
3. Modern React patterns (hooks, memoization)
4. seededRandom ensures SSR/client consistency
5. Progressive enhancement approach
6. Modern OKLCH color space

📋 Action Items

Must Fix:

1. Fix CateoryPill → CategoryPill typo
2. Replace innerHTML with React rendering (XSS)
3. Add OKLCH fallbacks for older browsers

Should Fix:

1. Extract analytics to utility
2. Split ArticleAnalyser into smaller files
3. Improve color hash algorithm
4. Add image error handling
5. Remove commented code

Nice to Have:

1. Add component tests
2. Add JSDoc documentation
3. Optimize canvas with requestAnimationFrame
4. Code-split D3 treemap

Summary Score

Category	Rating
Code Quality	7/10
Performance	7/10
Security	6/10
Accessibility	8/10
Test Coverage	3/10
Documentation	4/10

Overall: 6.5/10 - Good progress with mobile improvements, but needs refinement on security (XSS risk), code organization (file too large), and testing before merge.

Happy to help address any of these issues!