Refactor responsive grid layout and update dev dependencies

[marcodejongh]

Summary

This PR refactors the responsive grid layout system in the climbs list and queue components to use CSS media queries instead of Ant Design's responsive Col props. Additionally, it updates package dependencies to mark certain packages as optional dev dependencies.

Key Changes

Layout Refactoring

• Created new CSS module (climbs-list.module.css) with responsive grid styling using CSS media queries instead of Ant Design's xs, sm, lg, xl props

  • Default: full width (100%) on small screens
  • lg breakpoint (992px+): 2-column layout (50% width each)
  • This avoids JavaScript-based breakpoint detection issues

• Updated ClimbsList component to use the new CSS module for responsive column sizing

  • Replaced xs={24} lg={12} xl={12} with className={styles.climbCol}
  • Applied to both skeleton loader and actual climbs grid

• Simplified QueueListItem and QueueList components by removing responsive breakpoint props

  • Replaced xs={6} sm={5} with span={5} (fixed width)
  • Replaced xs={15} sm={17} with span={17} (fixed width)
  • Replaced xs={3} sm={2} with span={2} (fixed width)
  • These components use fixed layouts that don't require responsive behavior

Dependency Updates

• Updated package-lock.json to mark the following as devOptional instead of dev:

  • @playwright/test@1.57.0
  • @types/react@19.2.7
  • bufferutil@4.1.0
  • node-gyp-build@4.8.4
  • playwright@1.57.0
  • playwright-core@1.57.0

• Removed dev: true flag from production dependencies:

  • react@19.2.3
  • react-dom@19.2.3
  • scheduler@0.27.0

Implementation Details

The CSS media query approach provides more reliable responsive behavior compared to JavaScript-based breakpoint detection, particularly for static layouts that don't need dynamic recalculation during runtime.

https://claude.ai/code/session_018BBna6eD1vCRKfZSdK11QR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
boardsesh	Building	Preview, Comment	Feb 1, 2026 8:06am

[claude]

Claude Review

✅ Ready to merge - Minor issues noted below, but nothing blocking.

Issues

1. Column span math doesn't add up to 24 - queue-list-item.tsx:331-352: When item.addedByUser is truthy, columns are 5 + 15 + 2 + 2 = 24 ✓. When falsy, columns are 5 + 17 + 2 = 24 ✓. This is correct.

2. Responsive behavior removed without alternatives - queue-list-item.tsx and queue-list.tsx: The PR removes responsive breakpoint props (xs/sm) in favor of fixed span values. On very small screens (< 576px), the fixed spans may cause content to overflow or appear cramped compared to the previous xs={6} → span={5} adjustment. Consider whether this is intentional.

3. CSS module uses flexbox properties on antd Grid - climbs-list.module.css:5-7: The .climbCol class sets flex: 0 0 100% and max-width: 100%, but Ant Design's Col component already manages flex properties via its span/responsive props. Since no span is specified on the Col, this works, but mixing CSS flexbox overrides with Grid semantics could lead to confusion. Consider adding a comment clarifying this replaces antd's grid behavior.

[claude]

Claude Review

✅ Ready to merge - Minor issues noted below, but nothing blocking.

Issues

1. queue-list-item.tsx:337 - Column math is inconsistent: when item.addedByUser is false, total is 5+17+2=24 ✓, but when true, total is 5+15+2+2=24 ✓. The previous code used xs={15} for no-user (15+6+3=24 in xs grid) vs xs={13} for with-user (6+13+2+3=24). The new fixed spans may display differently on extra-small screens compared to original behavior.

2. queue-list-item.tsx vs queue-list.tsx - Inconsistent column widths in the same row structure:

   • queue-list.tsx:234 uses span={17} for content column without user
   • queue-list-item.tsx:337 uses span={15} when addedByUser is true, span={17} when false
   • The suggested climbs rows (queue-list.tsx) never show user avatars, so this is correct, but should verify this is intentional layout change from the previous responsive behavior.

Notes

• The PR description mentions fixing iOS Safari infinite loops from viewport size changes - this is a reasonable architectural decision to move to CSS media queries.
• The package-lock.json changes removing dev: true from react/react-dom/scheduler are correct since these are runtime dependencies.