From ec0e5e4ba27e7098f960c59a973c0279242d4d75 Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Tue, 13 Jan 2026 10:05:24 +1100
Subject: [PATCH 1/2] fix: Resolve AntD deprecation warnings across the
 codebase

- Replace Space `direction` prop with `orientation` (18 occurrences in 14 files)
- Replace Select `onDropdownVisibleChange` with `onOpenChange` (2 files)
- Replace Alert `message` prop with `title` (12 files)
- Fix useForm disconnection in auth-modal.tsx by adding `forceRender: true`
  to tab items and using `destroyOnHidden={false}` on Tabs

These changes eliminate the following console warnings:
- [antd: Space] direction is deprecated. Please use orientation instead.
- [antd: Select] onDropdownVisibleChange is deprecated. Please use onOpenChange instead.
- [antd: Alert] message is deprecated. Please use title instead.
- Instance created by useForm is not connected to any Form element.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../[playlist_uuid]/playlist-climbs-list.tsx    |  2 +-
 .../[playlist_uuid]/playlist-edit-drawer.tsx    |  2 +-
 .../[angle]/playlists/creator-name-select.tsx   |  2 +-
 packages/web/app/about/about-content.tsx        |  4 ++--
 .../web/app/auth/error/auth-error-content.tsx   |  4 ++--
 .../web/app/auth/login/auth-page-content.tsx    |  2 +-
 .../verify-request/verify-request-content.tsx   |  4 ++--
 packages/web/app/components/auth/auth-modal.tsx | 17 ++++++++++++-----
 .../components/board-page/angle-selector.tsx    |  2 +-
 .../climb-actions/actions/playlist-action.tsx   |  4 ++--
 .../climb-actions/actions/tick-action.tsx       |  2 +-
 .../create-climb/create-climb-form.tsx          |  2 +-
 .../moonboard-create-climb-form.tsx             |  8 ++++----
 .../web/app/components/logbook/tick-button.tsx  |  2 +-
 .../moonboard-import/moonboard-bulk-import.tsx  |  4 ++--
 .../app/components/queue-control/queue-list.tsx |  2 +-
 .../search-drawer/basic-search-form.tsx         |  2 +-
 .../search-drawer/setter-name-select.tsx        |  2 +-
 .../settings/aurora-credentials-section.tsx     |  4 ++--
 .../setup-wizard/join-session-tab.tsx           |  8 ++++----
 .../web/app/settings/settings-page-content.tsx  |  2 +-
 21 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/playlist-climbs-list.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/playlist-climbs-list.tsx
index f4497800..2b63103f 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/playlist-climbs-list.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/playlist-climbs-list.tsx
@@ -219,7 +219,7 @@ export default function PlaylistClimbsList({
         <Alert
           type="info"
           showIcon
-          message={`Not showing ${hiddenCount} ${hiddenCount === 1 ? 'climb' : 'climbs'} from other layouts`}
+          title={`Not showing ${hiddenCount} ${hiddenCount === 1 ? 'climb' : 'climbs'} from other layouts`}
           className={styles.hiddenClimbsNotice}
         />
       )}
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/playlist-edit-drawer.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/playlist-edit-drawer.tsx
index 5cf0cb16..5c99e06a 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/playlist-edit-drawer.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/playlist-edit-drawer.tsx
@@ -164,7 +164,7 @@ export default function PlaylistEditDrawer({ open, playlist, onClose, onSuccess
           label="Visibility"
           valuePropName="checked"
         >
-          <Space direction="vertical" size={4}>
+          <Space orientation="vertical" size={4}>
             <Switch
               checked={isPublic}
               onChange={handleVisibilityChange}
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlists/creator-name-select.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlists/creator-name-select.tsx
index 302b2ecc..4c9dc1a4 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlists/creator-name-select.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlists/creator-name-select.tsx
@@ -81,7 +81,7 @@ const CreatorNameSelect = ({
       value={value}
       onChange={onChange}
       onSearch={setSearchValue}
-      onDropdownVisibleChange={setIsOpen}
+      onOpenChange={setIsOpen}
       loading={isLoading}
       showSearch
       filterOption={false}
diff --git a/packages/web/app/about/about-content.tsx b/packages/web/app/about/about-content.tsx
index 440386a2..96426e51 100644
--- a/packages/web/app/about/about-content.tsx
+++ b/packages/web/app/about/about-content.tsx
@@ -31,7 +31,7 @@ export default function AboutContent() {
 
       <Content className={styles.content}>
         <Card>
-          <Space direction="vertical" size="large" className={styles.cardContent}>
+          <Space orientation="vertical" size="large" className={styles.cardContent}>
             {/* Hero Section */}
             <div className={styles.heroSection}>
               <Logo size="lg" linkToHome={false} />
@@ -68,7 +68,7 @@ export default function AboutContent() {
                 type="warning"
                 showIcon
                 icon={<LockOutlined />}
-                message="Single Vendor Risk"
+                title="Single Vendor Risk"
                 description="Thousands of dollars worth of climbing equipment relies on software from two small companies. If that software stops working, your expensive LED system becomes unusable."
               />
 
diff --git a/packages/web/app/auth/error/auth-error-content.tsx b/packages/web/app/auth/error/auth-error-content.tsx
index 22551ee3..2f81eb96 100644
--- a/packages/web/app/auth/error/auth-error-content.tsx
+++ b/packages/web/app/auth/error/auth-error-content.tsx
@@ -71,10 +71,10 @@ export default function AuthErrorContent() {
         }}
       >
         <Card style={{ width: '100%', maxWidth: 400, textAlign: 'center' }}>
-          <Space direction="vertical" size="large" style={{ width: '100%' }}>
+          <Space orientation="vertical" size="large" style={{ width: '100%' }}>
             <CloseCircleOutlined style={{ fontSize: 48, color: themeTokens.colors.error }} />
             <Title level={3}>Authentication Error</Title>
-            <Alert type="error" message={getErrorMessage()} showIcon />
+            <Alert type="error" title={getErrorMessage()} showIcon />
             <Button type="primary" href="/auth/login" block size="large">
               Back to Login
             </Button>
diff --git a/packages/web/app/auth/login/auth-page-content.tsx b/packages/web/app/auth/login/auth-page-content.tsx
index 0d85c821..d39c7b03 100644
--- a/packages/web/app/auth/login/auth-page-content.tsx
+++ b/packages/web/app/auth/login/auth-page-content.tsx
@@ -268,7 +268,7 @@ export default function AuthPageContent() {
         }}
       >
         <Card style={{ width: '100%', maxWidth: 400 }}>
-          <Space direction="vertical" style={{ width: '100%', textAlign: 'center', marginBottom: 24 }}>
+          <Space orientation="vertical" style={{ width: '100%', textAlign: 'center', marginBottom: 24 }}>
             <Logo size="md" />
             <Text type="secondary">Sign in or create an account to continue</Text>
           </Space>
diff --git a/packages/web/app/auth/verify-request/verify-request-content.tsx b/packages/web/app/auth/verify-request/verify-request-content.tsx
index 8548c1ca..02484030 100644
--- a/packages/web/app/auth/verify-request/verify-request-content.tsx
+++ b/packages/web/app/auth/verify-request/verify-request-content.tsx
@@ -88,11 +88,11 @@ export default function VerifyRequestContent() {
         }}
       >
         <Card style={{ width: '100%', maxWidth: 400, textAlign: 'center' }}>
-          <Space direction="vertical" size="large" style={{ width: '100%' }}>
+          <Space orientation="vertical" size="large" style={{ width: '100%' }}>
             {errorMessage ? (
               <>
                 <CloseCircleOutlined style={{ fontSize: 48, color: themeTokens.colors.error }} />
-                <Alert type="error" message={errorMessage} showIcon />
+                <Alert type="error" title={errorMessage} showIcon />
               </>
             ) : (
               <>
diff --git a/packages/web/app/components/auth/auth-modal.tsx b/packages/web/app/components/auth/auth-modal.tsx
index 596159fb..0ff27176 100644
--- a/packages/web/app/components/auth/auth-modal.tsx
+++ b/packages/web/app/components/auth/auth-modal.tsx
@@ -115,8 +115,13 @@ export default function AuthModal({
   };
 
   const handleCancel = () => {
-    loginForm.resetFields();
-    registerForm.resetFields();
+    // Only reset the active form to avoid "useForm not connected" warning
+    // The inactive tab's form may not be connected to the DOM
+    if (activeTab === 'login') {
+      loginForm.resetFields();
+    } else {
+      registerForm.resetFields();
+    }
     onClose();
   };
 
@@ -124,6 +129,7 @@ export default function AuthModal({
     {
       key: 'login',
       label: 'Login',
+      forceRender: true,
       children: (
         <Form form={loginForm} layout="vertical" onFinish={handleLogin}>
           <Form.Item
@@ -156,6 +162,7 @@ export default function AuthModal({
     {
       key: 'register',
       label: 'Create Account',
+      forceRender: true,
       children: (
         <Form form={registerForm} layout="vertical" onFinish={handleRegister}>
           <Form.Item
@@ -225,14 +232,14 @@ export default function AuthModal({
       width={400}
       centered
     >
-      <Space direction="vertical" size="large" style={{ width: '100%' }}>
-        <Space direction="vertical" style={{ width: '100%', textAlign: 'center' }}>
+      <Space orientation="vertical" size="large" style={{ width: '100%' }}>
+        <Space orientation="vertical" style={{ width: '100%', textAlign: 'center' }}>
           <HeartFilled style={{ fontSize: 32, color: '#ff4d4f' }} />
           <Text strong style={{ fontSize: 18 }}>{title}</Text>
           <Text type="secondary">{description}</Text>
         </Space>
 
-        <Tabs activeKey={activeTab} onChange={setActiveTab} items={tabItems} centered />
+        <Tabs activeKey={activeTab} onChange={setActiveTab} items={tabItems} centered destroyOnHidden={false} />
 
         <Divider style={{ margin: '8px 0' }}>
           <Text type="secondary">or</Text>
diff --git a/packages/web/app/components/board-page/angle-selector.tsx b/packages/web/app/components/board-page/angle-selector.tsx
index f6706a10..fb9cf376 100644
--- a/packages/web/app/components/board-page/angle-selector.tsx
+++ b/packages/web/app/components/board-page/angle-selector.tsx
@@ -151,7 +151,7 @@ export default function AngleSelector({ boardName, currentAngle, currentClimb }:
       >
         {currentClimb && (
           <Alert
-            message={currentClimb.name}
+            title={currentClimb.name}
             type="info"
             style={{ marginBottom: 12, textAlign: 'center' }}
           />
diff --git a/packages/web/app/components/climb-actions/actions/playlist-action.tsx b/packages/web/app/components/climb-actions/actions/playlist-action.tsx
index b2f54e7d..41a9415d 100644
--- a/packages/web/app/components/climb-actions/actions/playlist-action.tsx
+++ b/packages/web/app/components/climb-actions/actions/playlist-action.tsx
@@ -158,7 +158,7 @@ export function PlaylistAction({
         <Text strong>Add to Playlist</Text>
       </div>
       {playlists.length === 0 && !showCreateForm ? (
-        <Space direction="vertical" style={{ width: '100%', textAlign: 'center', padding: themeTokens.spacing[2] }}>
+        <Space orientation="vertical" style={{ width: '100%', textAlign: 'center', padding: themeTokens.spacing[2] }}>
           <Text type="secondary">No playlists yet</Text>
           <Button
             type="primary"
@@ -195,7 +195,7 @@ export function PlaylistAction({
                       onClick={() => handleTogglePlaylist(playlist.uuid, isInPlaylist)}
                     >
                       <Space style={{ width: '100%', justifyContent: 'space-between' }}>
-                        <Space direction="vertical" size={0}>
+                        <Space orientation="vertical" size={0}>
                           <Text strong style={{ fontSize: 13 }}>{playlist.name}</Text>
                           <Text type="secondary" style={{ fontSize: 11 }}>
                             {playlist.climbCount} {playlist.climbCount === 1 ? 'climb' : 'climbs'}
diff --git a/packages/web/app/components/climb-actions/actions/tick-action.tsx b/packages/web/app/components/climb-actions/actions/tick-action.tsx
index cfd24d01..8b5e6d06 100644
--- a/packages/web/app/components/climb-actions/actions/tick-action.tsx
+++ b/packages/web/app/components/climb-actions/actions/tick-action.tsx
@@ -67,7 +67,7 @@ export function TickAction({
   }, [boardDetails, climb.uuid, angle, closeDrawer]);
 
   const renderSignInPrompt = () => (
-    <Space direction="vertical" size="large" style={{ width: '100%', textAlign: 'center', padding: '24px 0' }}>
+    <Space orientation="vertical" size="large" style={{ width: '100%', textAlign: 'center', padding: '24px 0' }}>
       <Text strong style={{ fontSize: 16 }}>Sign in to record ticks</Text>
       <Paragraph type="secondary">
         Create a Boardsesh account to log your climbs and track your progress.
diff --git a/packages/web/app/components/create-climb/create-climb-form.tsx b/packages/web/app/components/create-climb/create-climb-form.tsx
index 3dddccb4..9e3c362c 100644
--- a/packages/web/app/components/create-climb/create-climb-form.tsx
+++ b/packages/web/app/components/create-climb/create-climb-form.tsx
@@ -263,7 +263,7 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
       {/* Auth alerts */}
       {!isAuthenticated && (
         <Alert
-          message="Sign in required"
+          title="Sign in required"
           description="Sign in to your Boardsesh account to save your climb."
           type="warning"
           showIcon
diff --git a/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx b/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx
index 420bce31..347c5490 100644
--- a/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx
+++ b/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx
@@ -163,7 +163,7 @@ export default function MoonBoardCreateClimbForm({
   return (
     <div className={styles.pageContainer}>
       <Alert
-        message={`MoonBoard Beta - ${layoutName} @ ${angle}°`}
+        title={`MoonBoard Beta - ${layoutName} @ ${angle}°`}
         description="MoonBoard support is in beta. Climbs are saved locally for now. Database sync coming soon!"
         type="info"
         showIcon
@@ -174,7 +174,7 @@ export default function MoonBoardCreateClimbForm({
 
       {saveSuccess && (
         <Alert
-          message="Climb saved successfully!"
+          title="Climb saved successfully!"
           description="Your climb has been saved locally. You can create another climb."
           type="success"
           showIcon
@@ -185,7 +185,7 @@ export default function MoonBoardCreateClimbForm({
 
       {ocrError && (
         <Alert
-          message="Import Failed"
+          title="Import Failed"
           description={ocrError}
           type="error"
           showIcon
@@ -197,7 +197,7 @@ export default function MoonBoardCreateClimbForm({
 
       {ocrWarnings.length > 0 && (
         <Alert
-          message="Import Warnings"
+          title="Import Warnings"
           description={ocrWarnings.map((w, i) => <div key={i}>{w}</div>)}
           type="warning"
           showIcon
diff --git a/packages/web/app/components/logbook/tick-button.tsx b/packages/web/app/components/logbook/tick-button.tsx
index 46e82cf6..da7b95b8 100644
--- a/packages/web/app/components/logbook/tick-button.tsx
+++ b/packages/web/app/components/logbook/tick-button.tsx
@@ -67,7 +67,7 @@ export const TickButton: React.FC<TickButtonProps> = ({ currentClimb, angle, boa
           open={drawerVisible}
           styles={{ wrapper: { height: '50%' } }}
         >
-          <Space direction="vertical" size="large" style={{ width: '100%', textAlign: 'center', padding: '24px 0' }}>
+          <Space orientation="vertical" size="large" style={{ width: '100%', textAlign: 'center', padding: '24px 0' }}>
             <Text strong style={{ fontSize: 16 }}>Sign in to record ticks</Text>
             <Paragraph type="secondary">
               Create a Boardsesh account to log your climbs and track your progress.
diff --git a/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx b/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
index 02c43b7a..71bc77d0 100644
--- a/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
+++ b/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
@@ -251,7 +251,7 @@ export default function MoonBoardBulkImport({
           {/* Errors */}
           {state.errors.length > 0 && (
             <Alert
-              message={`${state.errors.length} Warning(s)`}
+              title={`${state.errors.length} Warning(s)`}
               description={
                 <ul className={styles.errorList}>
                   {state.errors.map((err, i) => (
@@ -271,7 +271,7 @@ export default function MoonBoardBulkImport({
           {/* Success Summary */}
           {state.climbs.length > 0 && (
             <Alert
-              message={`${state.climbs.length} climb(s) ready to import`}
+              title={`${state.climbs.length} climb(s) ready to import`}
               description="Review the climbs below. You can edit or remove any before saving."
               type="success"
               showIcon
diff --git a/packages/web/app/components/queue-control/queue-list.tsx b/packages/web/app/components/queue-control/queue-list.tsx
index a3e1d4ee..db4eb3f0 100644
--- a/packages/web/app/components/queue-control/queue-list.tsx
+++ b/packages/web/app/components/queue-control/queue-list.tsx
@@ -297,7 +297,7 @@ const QueueList = forwardRef<QueueListHandle, QueueListProps>(({ boardDetails, o
           open={tickDrawerVisible}
           styles={{ wrapper: { height: '50%' } }}
         >
-          <Space direction="vertical" size="large" style={{ width: '100%', textAlign: 'center', padding: '24px 0' }}>
+          <Space orientation="vertical" size="large" style={{ width: '100%', textAlign: 'center', padding: '24px 0' }}>
             <Text strong style={{ fontSize: 16 }}>Sign in to record ticks</Text>
             <Paragraph type="secondary">
               Create a Boardsesh account to log your climbs and track your progress.
diff --git a/packages/web/app/components/search-drawer/basic-search-form.tsx b/packages/web/app/components/search-drawer/basic-search-form.tsx
index 2c732978..03dc1a62 100644
--- a/packages/web/app/components/search-drawer/basic-search-form.tsx
+++ b/packages/web/app/components/search-drawer/basic-search-form.tsx
@@ -45,7 +45,7 @@ const BasicSearchForm: React.FC<BasicSearchFormProps> = ({ boardDetails }) => {
     if (!isAuthenticated) {
       return (
         <Alert
-          message="Sign in to filter by progress"
+          title="Sign in to filter by progress"
           description="Login to filter climbs based on your attempt and completion history."
           type="info"
           showIcon
diff --git a/packages/web/app/components/search-drawer/setter-name-select.tsx b/packages/web/app/components/search-drawer/setter-name-select.tsx
index 98ad2be1..47c37eb0 100644
--- a/packages/web/app/components/search-drawer/setter-name-select.tsx
+++ b/packages/web/app/components/search-drawer/setter-name-select.tsx
@@ -60,7 +60,7 @@ const SetterNameSelect = () => {
       value={uiSearchParams.settername}
       onChange={(value) => updateFilters({ settername: value })}
       onSearch={setSearchValue}
-      onDropdownVisibleChange={setIsOpen}
+      onOpenChange={setIsOpen}
       loading={isLoading}
       showSearch
       filterOption={false} // Server-side filtering
diff --git a/packages/web/app/components/settings/aurora-credentials-section.tsx b/packages/web/app/components/settings/aurora-credentials-section.tsx
index a928f7b6..43d7a674 100644
--- a/packages/web/app/components/settings/aurora-credentials-section.tsx
+++ b/packages/web/app/components/settings/aurora-credentials-section.tsx
@@ -137,7 +137,7 @@ function BoardCredentialCard({
             type="warning"
             icon={<WarningOutlined />}
             showIcon
-            message={`${totalUnsynced} item${totalUnsynced > 1 ? 's' : ''} pending sync`}
+            title={`${totalUnsynced} item${totalUnsynced > 1 ? 's' : ''} pending sync`}
             description={
               <Text type="secondary">
                 {unsyncedCounts.ascents > 0 && `${unsyncedCounts.ascents} ascent${unsyncedCounts.ascents > 1 ? 's' : ''}`}
@@ -293,7 +293,7 @@ export default function AuroraCredentialsSection() {
           Data created in Boardsesh stays local and does not sync back to Aurora.
         </Text>
 
-        <Space direction="vertical" size="middle" className={styles.cardsContainer}>
+        <Space orientation="vertical" size="middle" className={styles.cardsContainer}>
           <BoardCredentialCard
             boardType="kilter"
             credential={getCredentialForBoard('kilter')}
diff --git a/packages/web/app/components/setup-wizard/join-session-tab.tsx b/packages/web/app/components/setup-wizard/join-session-tab.tsx
index eb55ae66..3a833702 100644
--- a/packages/web/app/components/setup-wizard/join-session-tab.tsx
+++ b/packages/web/app/components/setup-wizard/join-session-tab.tsx
@@ -88,7 +88,7 @@ const JoinSessionTab = () => {
         {error && (
           <Alert
             type="warning"
-            message={getGeolocationErrorMessage(error)}
+            title={getGeolocationErrorMessage(error)}
             style={{ marginBottom: themeTokens.spacing[4] }}
           />
         )}
@@ -122,7 +122,7 @@ const JoinSessionTab = () => {
       <div style={{ textAlign: 'center', padding: themeTokens.spacing[8] }}>
         <Empty
           description={
-            <Space direction="vertical" size="small">
+            <Space orientation="vertical" size="small">
               <Text>No backend server configured</Text>
               <Paragraph type="secondary" style={{ marginBottom: 0 }}>
                 To join sessions, you need to connect to a Boardsesh backend server.
@@ -140,7 +140,7 @@ const JoinSessionTab = () => {
       <div style={{ textAlign: 'center', padding: themeTokens.spacing[8] }}>
         <Alert
           type="error"
-          message={fetchError}
+          title={fetchError}
           style={{ marginBottom: themeTokens.spacing[4] }}
         />
         <Button icon={<ReloadOutlined />} onClick={refresh}>
@@ -156,7 +156,7 @@ const JoinSessionTab = () => {
       <div style={{ textAlign: 'center', padding: themeTokens.spacing[8] }}>
         <Empty
           description={
-            <Space direction="vertical" size="small">
+            <Space orientation="vertical" size="small">
               <Text>No sessions found nearby</Text>
               <Paragraph type="secondary" style={{ marginBottom: 0 }}>
                 There are no active climbing sessions within 500 meters.
diff --git a/packages/web/app/settings/settings-page-content.tsx b/packages/web/app/settings/settings-page-content.tsx
index 3bc47133..f42967ac 100644
--- a/packages/web/app/settings/settings-page-content.tsx
+++ b/packages/web/app/settings/settings-page-content.tsx
@@ -295,7 +295,7 @@ export default function SettingsPageContent() {
 
           <Form form={form} layout="vertical">
             <Form.Item label="Avatar">
-              <Space direction="vertical" align="center" style={{ width: '100%' }}>
+              <Space orientation="vertical" align="center" style={{ width: '100%' }}>
                 <Avatar size={96} src={previewUrl} icon={<UserOutlined />} />
                 <Space>
                   <Upload {...uploadProps}>

From 1b1cfecd3810c28b28dca8be2788d265d05ce79c Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Tue, 13 Jan 2026 10:13:07 +1100
Subject: [PATCH 2/2] fix: Reset both forms in handleCancel since forceRender
 keeps them connected

Since forceRender: true ensures both forms stay mounted in the DOM,
the conditional reset logic was unnecessary and could leave stale data
in the non-active form.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 packages/web/app/components/auth/auth-modal.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/web/app/components/auth/auth-modal.tsx b/packages/web/app/components/auth/auth-modal.tsx
index 0ff27176..63d1cb0e 100644
--- a/packages/web/app/components/auth/auth-modal.tsx
+++ b/packages/web/app/components/auth/auth-modal.tsx
@@ -115,13 +115,8 @@ export default function AuthModal({
   };
 
   const handleCancel = () => {
-    // Only reset the active form to avoid "useForm not connected" warning
-    // The inactive tab's form may not be connected to the DOM
-    if (activeTab === 'login') {
-      loginForm.resetFields();
-    } else {
-      registerForm.resetFields();
-    }
+    loginForm.resetFields();
+    registerForm.resetFields();
     onClose();
   };