From 1d6e561bc4e720c40cae5f5602de3bfa5906d891 Mon Sep 17 00:00:00 2001 From: Brandon Julio Thenaro Date: Wed, 21 Oct 2026 17:25:17 +0700 Subject: [PATCH 1/2] fix(web): anchor popup animations to their aligned edge Toggling Thread Details with the right panel open makes the card scale sideways: its header-wide anchor puts the animation origin near the opposite edge. In the browser reproduction, the 296px popup uses an origin of 58px and its right edge moves 4.76px during the transition. Adopt Base UI 1.8.0, the first release containing mui/base-ui#5015: https://github.com/mui/base-ui/pull/5015 The released fix uses the aligned edge for arrowless, unshifted popups and retains anchor-aware positioning for centered or shifted popups. The same T3 workflow now uses a 296px origin with a stationary right edge. Keep the lockfile update limited to Base UI and its required Floating UI dependencies, preserving other consumers' resolutions. Verified the actual web UI at 1280x800 and 390x844, repeated open/close, Escape focus return, and the model picker. check:changed passes format, knip, and 32 package typechecks; 7 focused browser suites pass 8 tests. Frozen installation passes. Native Electron and mobile were not run. --- apps/web/package.json | 2 +- pnpm-lock.yaml | 52 ++++++++++++++++++++++++++++++------------- 2 files changed, 37 insertions(+), 17 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index 1fc7fd6eb5fa9..7eaea525dfac7 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -12,7 +12,7 @@ "test": "vp test run --passWithNoTests --project unit --project browser" }, "dependencies": { - "@base-ui/react": "^1.4.1", + "@base-ui/react": "^1.8.0", "@clerk/clerk-js": "catalog:", "@clerk/electron": "catalog:", "@clerk/react": "catalog:", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ad93d5d4a4259..a601c86e697f6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -977,8 +977,8 @@ importers: apps/web: dependencies: '@base-ui/react': - specifier: ^1.4.1 - version: 1.5.0(@date-fns/tz@1.5.0)(@types/react@19.3.0)(date-fns@4.4.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0) + specifier: ^1.8.0 + version: 1.8.0(@date-fns/tz@1.5.0)(@types/react@19.3.0)(date-fns@4.4.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0) '@clerk/clerk-js': specifier: 6.39.1 version: 6.39.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0) @@ -2806,8 +2806,8 @@ packages: resolution: {integrity: sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==} engines: {node: '>=6.9.0'} - '@base-ui/react@1.5.0': - resolution: {integrity: sha512-z1gSAlced1yY+iM+mHDEtIkD8UI3Ebs52MuBPxvV6f5hRutk+xvCH/wuB7hDqDzK9JG5FoMz5nhrqtSs1wjt1A==} + '@base-ui/react@1.8.0': + resolution: {integrity: sha512-P0/1sxo6SBVZOklKMIedvTWqw2s2IQzi9x5bIVsXu980cuSOD4NeuRSs+/L7LZQfDkZP/uRZyGPyfFl/B1oH+Q==} engines: {node: '>=14.0.0'} peerDependencies: '@date-fns/tz': ^1.2.0 @@ -2823,8 +2823,8 @@ packages: date-fns: optional: true - '@base-ui/utils@0.2.9': - resolution: {integrity: sha512-x/PDDCYzoqPpjrdyb3VcyylTI2IjUXEtYDGi5foh7KsnmNJIIaVwA2GLgDH1dps1GgXiJbA60hM+AyuTfQzIvw==} + '@base-ui/utils@0.4.0': + resolution: {integrity: sha512-bO9fz25kKtPf+aZVyfQrC0PDmJdmVni31W2hCS5/Owb+inwdIL3XU26pCPRPlt4LSxZrBgLwubXQXQlKaFEZzw==} peerDependencies: '@types/react': ^17 || ^18 || ^19 react: ^17 || ^18 || ^19 @@ -4152,11 +4152,17 @@ packages: '@floating-ui/core@1.7.5': resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==} + '@floating-ui/core@1.8.0': + resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==} + '@floating-ui/dom@1.7.6': resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==} - '@floating-ui/react-dom@2.1.8': - resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==} + '@floating-ui/dom@1.8.0': + resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==} + + '@floating-ui/react-dom@2.1.9': + resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' @@ -4164,6 +4170,9 @@ packages: '@floating-ui/utils@0.2.11': resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==} + '@floating-ui/utils@0.2.12': + resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==} + '@formkit/auto-animate@0.9.0': resolution: {integrity: sha512-VhP4zEAacXS3dfTpJpJ88QdLqMTcabMg0jwpOSxZ/VzfQVfl3GkZSCZThhGC5uhq/TxPHPzW0dzr4H9Bb1OgKA==} @@ -13478,12 +13487,12 @@ snapshots: '@babel/helper-string-parser': 7.29.7 '@babel/helper-validator-identifier': 7.29.7 - '@base-ui/react@1.5.0(@date-fns/tz@1.5.0)(@types/react@19.3.0)(date-fns@4.4.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)': + '@base-ui/react@1.8.0(@date-fns/tz@1.5.0)(@types/react@19.3.0)(date-fns@4.4.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)': dependencies: '@babel/runtime': 7.29.7 - '@base-ui/utils': 0.2.9(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0) - '@floating-ui/react-dom': 2.1.8(react-dom@19.3.0(react@19.3.0))(react@19.3.0) - '@floating-ui/utils': 0.2.11 + '@base-ui/utils': 0.4.0(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0) + '@floating-ui/react-dom': 2.1.9(react-dom@19.3.0(react@19.3.0))(react@19.3.0) + '@floating-ui/utils': 0.2.12 react: 19.3.0 react-dom: 19.3.0(react@19.3.0) use-sync-external-store: 1.6.0(react@19.3.0) @@ -13492,10 +13501,10 @@ snapshots: '@types/react': 19.3.0 date-fns: 4.4.0 - '@base-ui/utils@0.2.9(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)': + '@base-ui/utils@0.4.0(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)': dependencies: '@babel/runtime': 7.29.7 - '@floating-ui/utils': 0.2.11 + '@floating-ui/utils': 0.2.12 react: 19.3.0 react-dom: 19.3.0(react@19.3.0) reselect: 5.2.0 @@ -14880,19 +14889,30 @@ snapshots: dependencies: '@floating-ui/utils': 0.2.11 + '@floating-ui/core@1.8.0': + dependencies: + '@floating-ui/utils': 0.2.12 + '@floating-ui/dom@1.7.6': dependencies: '@floating-ui/core': 1.7.5 '@floating-ui/utils': 0.2.11 - '@floating-ui/react-dom@2.1.8(react-dom@19.3.0(react@19.3.0))(react@19.3.0)': + '@floating-ui/dom@1.8.0': dependencies: - '@floating-ui/dom': 1.7.6 + '@floating-ui/core': 1.8.0 + '@floating-ui/utils': 0.2.12 + + '@floating-ui/react-dom@2.1.9(react-dom@19.3.0(react@19.3.0))(react@19.3.0)': + dependencies: + '@floating-ui/dom': 1.8.0 react: 19.3.0 react-dom: 19.3.0(react@19.3.0) '@floating-ui/utils@0.2.11': {} + '@floating-ui/utils@0.2.12': {} + '@formkit/auto-animate@0.9.0': {} '@hono/node-server@1.19.17(hono@4.13.7)': From 0045891fd9f08363448870af58df7462fb36b889 Mon Sep 17 00:00:00 2001 From: Brandon Julio Thenaro Date: Wed, 21 Oct 2026 17:38:47 +0700 Subject: [PATCH 2/2] fix(web): respect the upgraded popover handle lifecycle Base UI 1.8 warns when a detached handle is closed. SidebarUpdateControl runs its closing effect even when the web/no-update path renders no Popover.Root, producing two warnings during a StrictMode mount. Close only an open handle. A detached handle reports isOpen=false; attached open release notes still close when update visibility changes. This is a compatibility adjustment for the Base UI upgrade in this PR. Verified the warning disappears on a fresh dev-page load, Thread Details still opens with its right-edge origin, and 18 focused update tests pass. check:changed passes formatting, lint, knip, and 32 package typechecks. --- apps/web/src/components/sidebar/SidebarUpdatePill.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/components/sidebar/SidebarUpdatePill.tsx b/apps/web/src/components/sidebar/SidebarUpdatePill.tsx index 68b9537084216..8872fe9a7a300 100644 --- a/apps/web/src/components/sidebar/SidebarUpdatePill.tsx +++ b/apps/web/src/components/sidebar/SidebarUpdatePill.tsx @@ -261,7 +261,7 @@ function SidebarUpdateControl() { useEffect(() => { if (!showReleaseNotesPopover) { - releaseNotesPopoverHandle.close(); + if (releaseNotesPopoverHandle.isOpen) releaseNotesPopoverHandle.close(); return; }