fix: Hydration Error on board page (GITBOX-2)

[ryota-murakami]

Sentry Issue

• ID: GITBOX-2
• URL: https://laststance.sentry.io/issues/GITBOX-2
• Environment: vercel-production
• Occurrences: 6
• First seen: 2025-12-25
• Last seen: 2026-01-29

Error

Hydration Error
Hydration failed - the server rendered HTML didn't match the client.

Affected Page

/board/:id - https://gitbox-laststance.vercel.app/board/c57f0aa9-ff41-4b2b-9713-7418840234ab

Context

• Browser: Chrome 144.0.0
• OS: Mac OS X
• React: 19.3.0-canary

Possible Causes

1. Server/client state mismatch in Redux store
2. Date/time formatting differences between server and client
3. Browser extensions modifying DOM
4. Race condition in data fetching

Notes

Currently ignored in Sentry via ignoreErrors config, but should be investigated to prevent user-facing issues.

[ryota-murakami]

Fixed in commit e66e8a1

Root Cause

Sidebar.tsx applied isCollapsed from Redux without mounted guard, causing SSR/CSR mismatch:

• Server: Redux default isCollapsed=false → rendered w-64 (expanded)
• Client: localStorage restored isCollapsed=true → expected w-16 (collapsed)
• Result: React detected class mismatch → Hydration Error

Fix Applied

Applied useMounted() guard pattern (same as KanbanBoard.tsx):

// Before
const sidebarWidth = isCollapsed ? 'w-16' : 'w-64'

// After - SSR always renders expanded (stable default)
const sidebarWidth = mounted && isCollapsed ? 'w-16' : 'w-64'

Also applied to:

• All conditional content rendering
• NavItem/NavButton/ThemeToggle isCollapsed props
• Added suppressHydrationWarning to affected containers

Verification

• ✅ TypeCheck passes
• ✅ Lint passes
• ✅ 1265 unit tests pass
• ✅ 293 E2E tests pass
• ✅ Production build succeeds
• ✅ Browser testing: No hydration errors on /boards and /board/:id pages