Skip to content

Refactor responsive grid layout and update dev dependencies #620

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
marcodejongh wants to merge 3 commits into
base: main
Choose a base branch
from
+42 −21
Open

Refactor responsive grid layout and update dev dependencies #620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79d97a6
fix: Replace responsive Col props with fixed spans to prevent infinit…
claude Feb 1, 2026
f2ed52e
chore: Update package-lock.json
claude Feb 1, 2026
4289b76
docs: Add clarifying comments to climbs-list CSS module
claude Feb 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 6 additions & 9 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

23 changes: 23 additions & 0 deletions packages/web/app/components/board-page/climbs-list.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/* Responsive grid column for climbs list

This CSS replaces antd's responsive Col props (xs/sm/lg/xl) to avoid
JavaScript-based breakpoint detection that can cause infinite loops
on iOS Safari when the browser UI changes viewport size.

Since no `span` prop is set on the Col component, antd doesn't apply
its flex rules, allowing these CSS flex properties to control the layout.
This is intentional - we're using antd Col purely for gutter spacing
while CSS handles the responsive column widths. */
.climbCol {
/* Default: full width on small screens (matches previous xs={24}) */
flex: 0 0 100%;
max-width: 100%;
}

/* lg breakpoint (992px+): 2 columns (matches previous lg={12}) */
@media (min-width: 992px) {
.climbCol {
flex: 0 0 50%;
max-width: 50%;
}
}
5 changes: 3 additions & 2 deletions packages/web/app/components/board-page/climbs-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useQueueContext } from '../graphql-queue';
import ClimbCard from '../climb-card/climb-card';
import { ClimbCardSkeleton } from './board-page-skeleton';
import { useSearchParams } from 'next/navigation';
import styles from './climbs-list.module.css';

type ClimbsListProps = ParsedBoardRouteParameters & {
boardDetails: BoardDetails;
Expand All @@ -15,7 +16,7 @@ type ClimbsListProps = ParsedBoardRouteParameters & {

const ClimbsListSkeleton = ({ aspectRatio }: { aspectRatio: number }) => {
return Array.from({ length: 10 }, (_, i) => (
<Col xs={24} lg={12} xl={12} key={i}>
<Col key={i} className={styles.climbCol}>
<ClimbCardSkeleton aspectRatio={aspectRatio} />
</Col>
));
Expand Down Expand Up @@ -134,7 +135,7 @@ const ClimbsList = ({ boardDetails, initialClimbs }: ClimbsListProps) => {
<div style={{ paddingTop: '5px' }}>
<Row gutter={[16, 16]}>
{climbs.map((climb) => (
<Col xs={24} lg={12} xl={12} id={climb.uuid} key={climb.uuid}>
<Col id={climb.uuid} key={climb.uuid} className={styles.climbCol}>
<div
ref={(el) => {
climbsRefs.current[climb.uuid] = el;
Expand Down
8 changes: 4 additions & 4 deletions packages/web/app/components/queue-control/queue-list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,13 +328,13 @@ const QueueListItem: React.FC<QueueListItemProps> = ({
onDoubleClick={() => setCurrentClimbQueueItem(item)}
>
<Row style={{ width: '100%' }} gutter={[8, 8]} align="middle" wrap={false}>
<Col xs={6} sm={5}>
<Col span={5}>
<ClimbThumbnail
boardDetails={boardDetails}
currentClimb={item.climb}
/>
</Col>
<Col xs={item.addedByUser ? 13 : 15} sm={item.addedByUser ? 15 : 17}>
<Col span={item.addedByUser ? 15 : 17}>
<ClimbTitle
climb={item.climb}
showAngle
Expand All @@ -343,13 +343,13 @@ const QueueListItem: React.FC<QueueListItemProps> = ({
/>
</Col>
{item.addedByUser && (
<Col xs={2} sm={2}>
<Col span={2}>
<Tooltip title={item.addedByUser.username}>
<Avatar size="small" src={item.addedByUser.avatarUrl} icon={<UserOutlined />} />
</Tooltip>
</Col>
)}
<Col xs={3} sm={2}>
<Col span={2}>
<Dropdown
menu={{
items: [
Expand Down
12 changes: 6 additions & 6 deletions packages/web/app/components/queue-control/queue-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,18 +223,18 @@ const QueueList = forwardRef<QueueListHandle, QueueListProps>(({ boardDetails, o
}}
>
<Row style={{ width: '100%' }} gutter={[8, 8]} align="middle" wrap={false}>
<Col xs={6} sm={5}>
<Col span={5}>
<ClimbThumbnail
boardDetails={boardDetails}
currentClimb={climb}
enableNavigation={true}
onNavigate={onClimbNavigate}
/>
</Col>
<Col xs={15} sm={17}>
<Col span={17}>
<ClimbTitle climb={climb} showAngle centered />
</Col>
<Col xs={3} sm={2}>
<Col span={2}>
<Button type="default" icon={<PlusOutlined />} onClick={() => addToQueue(climb)} />
</Col>
</Row>
Expand All @@ -252,13 +252,13 @@ const QueueList = forwardRef<QueueListHandle, QueueListProps>(({ boardDetails, o
<Flex vertical gap={themeTokens.spacing[2]} style={{ padding: themeTokens.spacing[2] }}>
{[1, 2, 3].map((i) => (
<Row key={i} gutter={[8, 8]} align="middle" wrap={false}>
<Col xs={6} sm={5}>
<Col span={5}>
<Skeleton.Image active style={{ width: '100%', height: 60 }} />
</Col>
<Col xs={15} sm={17}>
<Col span={17}>
<Skeleton active paragraph={{ rows: 1 }} title={false} />
</Col>
<Col xs={3} sm={2}>
<Col span={2}>
<Skeleton.Button active size="small" />
</Col>
</Row>
Expand Down
Loading