From 79d97a6c26c82d2d564639946b56ef32cc16697d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 1 Feb 2026 07:10:58 +0000
Subject: [PATCH 1/3] fix: Replace responsive Col props with fixed spans to
 prevent infinite loop

Antd's Row/Col components with responsive breakpoints (xs, sm, lg, etc.)
internally use a responsiveObserver that subscribes to media query changes.
When many components use responsive breakpoints (like items in a list),
media query changes (e.g., Safari toolbar appearing/disappearing on iOS)
can trigger cascading re-renders leading to React's maximum update depth
error.

This fix:
- Replaces responsive Col props with fixed span values in queue-list.tsx,
  queue-list-item.tsx, and climbs-list.tsx
- Adds CSS media queries in climbs-list.module.css for responsive 2-column
  layout on larger screens
- Follows CLAUDE.md guidelines to use CSS media queries instead of
  JavaScript-based breakpoint detection

https://claude.ai/code/session_018BBna6eD1vCRKfZSdK11QR
---
 .../components/board-page/climbs-list.module.css | 16 ++++++++++++++++
 .../app/components/board-page/climbs-list.tsx    |  5 +++--
 .../components/queue-control/queue-list-item.tsx |  8 ++++----
 .../app/components/queue-control/queue-list.tsx  | 12 ++++++------
 4 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 packages/web/app/components/board-page/climbs-list.module.css

diff --git a/packages/web/app/components/board-page/climbs-list.module.css b/packages/web/app/components/board-page/climbs-list.module.css
new file mode 100644
index 00000000..1f1a4e98
--- /dev/null
+++ b/packages/web/app/components/board-page/climbs-list.module.css
@@ -0,0 +1,16 @@
+/* Responsive grid column for climbs list
+   Uses CSS media queries instead of antd's responsive Col props
+   to avoid JavaScript-based breakpoint detection issues */
+.climbCol {
+  /* Default: full width on small screens */
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+/* lg breakpoint (992px+): 2 columns */
+@media (min-width: 992px) {
+  .climbCol {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+}
diff --git a/packages/web/app/components/board-page/climbs-list.tsx b/packages/web/app/components/board-page/climbs-list.tsx
index b9542624..0190a863 100644
--- a/packages/web/app/components/board-page/climbs-list.tsx
+++ b/packages/web/app/components/board-page/climbs-list.tsx
@@ -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;
@@ -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>
   ));
@@ -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;
diff --git a/packages/web/app/components/queue-control/queue-list-item.tsx b/packages/web/app/components/queue-control/queue-list-item.tsx
index ee0f3a53..6b37d996 100644
--- a/packages/web/app/components/queue-control/queue-list-item.tsx
+++ b/packages/web/app/components/queue-control/queue-list-item.tsx
@@ -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
@@ -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: [
diff --git a/packages/web/app/components/queue-control/queue-list.tsx b/packages/web/app/components/queue-control/queue-list.tsx
index db4eb3f0..2bad8b6a 100644
--- a/packages/web/app/components/queue-control/queue-list.tsx
+++ b/packages/web/app/components/queue-control/queue-list.tsx
@@ -223,7 +223,7 @@ 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}
@@ -231,10 +231,10 @@ const QueueList = forwardRef<QueueListHandle, QueueListProps>(({ boardDetails, o
                       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>
@@ -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>

From f2ed52ee5401b63f048117eed17bb7816f60eb08 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 1 Feb 2026 07:11:45 +0000
Subject: [PATCH 2/3] chore: Update package-lock.json

https://claude.ai/code/session_018BBna6eD1vCRKfZSdK11QR
---
 package-lock.json | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 39cd228d..9d1374c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4565,7 +4565,7 @@
       "version": "1.57.0",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.57.0.tgz",
       "integrity": "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "playwright": "1.57.0"
@@ -7263,7 +7263,7 @@
       "version": "19.2.7",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -8011,7 +8011,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.1.0.tgz",
       "integrity": "sha512-ZMANVnAixE6AWWnPzlW2KpUrxhm9woycYvPOo67jWHyFowASTEd9s+QN1EIMsSDtwhIxN4sWE1jotpuDUIgyIw==",
-      "dev": true,
+      "devOptional": true,
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -10158,7 +10158,7 @@
       "version": "4.8.4",
       "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
       "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "bin": {
         "node-gyp-build": "bin.js",
@@ -10647,7 +10647,7 @@
       "version": "1.57.0",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
       "integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "playwright-core": "1.57.0"
@@ -10666,7 +10666,7 @@
       "version": "1.57.0",
       "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
       "integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "playwright-core": "cli.js"
@@ -10898,7 +10898,6 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -10918,7 +10917,6 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.27.0"
@@ -11285,7 +11283,6 @@
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/scroll-into-view-if-needed": {

From 4289b766b5ca1a60f5e01ec27cd3eff48822d774 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 1 Feb 2026 08:06:24 +0000
Subject: [PATCH 3/3] docs: Add clarifying comments to climbs-list CSS module

Explains why CSS flex properties are used alongside antd Col component
and documents the responsive breakpoint behavior being replicated.

https://claude.ai/code/session_018BBna6eD1vCRKfZSdK11QR
---
 .../components/board-page/climbs-list.module.css  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/web/app/components/board-page/climbs-list.module.css b/packages/web/app/components/board-page/climbs-list.module.css
index 1f1a4e98..587145ef 100644
--- a/packages/web/app/components/board-page/climbs-list.module.css
+++ b/packages/web/app/components/board-page/climbs-list.module.css
@@ -1,13 +1,20 @@
 /* Responsive grid column for climbs list
-   Uses CSS media queries instead of antd's responsive Col props
-   to avoid JavaScript-based breakpoint detection issues */
+
+   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 */
+  /* Default: full width on small screens (matches previous xs={24}) */
   flex: 0 0 100%;
   max-width: 100%;
 }
 
-/* lg breakpoint (992px+): 2 columns */
+/* lg breakpoint (992px+): 2 columns (matches previous lg={12}) */
 @media (min-width: 992px) {
   .climbCol {
     flex: 0 0 50%;