From 930803b0343a228585070eb97bbb2eb8eaee1bc5 Mon Sep 17 00:00:00 2001 From: Lukas Date: Fri, 31 Jul 2026 13:43:13 +0300 Subject: [PATCH 1/5] [docs] Bump @docsearch/react to ^4.7.0 Bump the stylesheet pinned in AppSearch to 4.7.0 in the same commit, since the Renovate custom manager groups the two and the CDN URL is what the docs actually load. 4.7.0 raises .DocSearch-Title line-height from .5em to 1.5em (algolia/docsearch#2908), which is the overlap our no-results override worked around, so drop it. It also wraps long hits on mobile instead of truncating them (algolia/docsearch#2907); verified the hit title/path ellipsis override stays inert there rather than clipping the wrapped text. Co-Authored-By: Claude Opus 5 --- docs/package.json | 2 +- .../src/AppLayout/components/AppSearch.tsx | 7 +--- pnpm-lock.yaml | 32 +++++++++---------- pnpm-workspace.yaml | 2 +- 4 files changed, 19 insertions(+), 24 deletions(-) diff --git a/docs/package.json b/docs/package.json index a8811a60bf0de0..bc7c20128553ef 100644 --- a/docs/package.json +++ b/docs/package.json @@ -21,7 +21,7 @@ "@babel/core": "^7.29.7", "@babel/runtime": "^7.29.7", "@base-ui/react": "catalog:docs", - "@docsearch/react": "^4.6.3", + "@docsearch/react": "^4.7.0", "@emotion/cache": "catalog:docs", "@emotion/react": "catalog:docs", "@emotion/server": "catalog:docs", diff --git a/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx b/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx index 9c9a9015201d24..04e2215f12861e 100644 --- a/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx +++ b/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx @@ -221,7 +221,7 @@ export interface AppSearchProps { export function AppSearch(props: AppSearchProps) { useLazyCSS( - 'https://cdn.jsdelivr.net/npm/@docsearch/css@4.6.3/dist/style.min.css', + 'https://cdn.jsdelivr.net/npm/@docsearch/css@4.7.0/dist/style.min.css', '#app-search', { layer: 'docsearch' }, ); @@ -612,11 +612,6 @@ export function AppSearch(props: AppSearchProps) { marginTop: theme.spacing(1), }, }, - // The no-results title inherits a too-small line-height, so its long query text - // overlaps instead of wrapping; restore a readable line-height (matches prod). - '& .DocSearch-NoResults .DocSearch-Title': { - lineHeight: 1.5, - }, // The v4 screen icon (no-results / empty state) hardcodes an inline stroke="#5a5e9a" // that no variable can reach; recolor it to the MUI muted grey. '& .DocSearch-Screen-Icon svg': { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aee0b5f0266b47..ad89c04ad926f2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,8 +10,8 @@ catalogs: specifier: ^1.6.0 version: 1.6.0 '@docsearch/react': - specifier: ^4.6.3 - version: 4.6.3 + specifier: ^4.7.0 + version: 4.7.0 '@emotion/cache': specifier: ^11.14.0 version: 11.14.0 @@ -255,8 +255,8 @@ importers: specifier: catalog:docs version: 1.6.0(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@docsearch/react': - specifier: ^4.6.3 - version: 4.6.3(@algolia/client-search@5.18.0)(@types/react@19.2.17)(algoliasearch@5.18.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(search-insights@2.13.0) + specifier: ^4.7.0 + version: 4.7.0(@algolia/client-search@5.18.0)(@types/react@19.2.17)(algoliasearch@5.18.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(search-insights@2.13.0) '@emotion/cache': specifier: catalog:docs version: 11.14.0 @@ -698,7 +698,7 @@ importers: version: 1.6.0(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@docsearch/react': specifier: catalog:docs - version: 4.6.3(@algolia/client-search@5.18.0)(@types/react@19.2.17)(algoliasearch@5.18.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(search-insights@2.13.0) + version: 4.7.0(@algolia/client-search@5.18.0)(@types/react@19.2.17)(algoliasearch@5.18.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(search-insights@2.13.0) '@emotion/cache': specifier: catalog:docs version: 11.14.0 @@ -2502,8 +2502,8 @@ packages: resolution: {integrity: sha512-4B4OijXeVNOPZlYA2oEwWOTkzyltLao+xbotHQeqN++Rv27Y6s818+n2Qkp8q+Fxhn0t/5lA5X1Mxktud8eayQ==} engines: {node: '>=14.17.0'} - '@docsearch/core@4.6.3': - resolution: {integrity: sha512-rUOujwIpxJRgD7+kicVsI3D5sqBvdiRTquzWBpTEXZs8ZXfGbfzpus5HqumaNYTppN2HvH8E2yNuRwYdHJeOlA==} + '@docsearch/core@4.7.0': + resolution: {integrity: sha512-p/9xVKmPDj3FPvMfPf5naVO3Ej8SCbcUugGvx1+8GgkuBNbqxqN2Irx3WLBv8VY0jH7XpRwKWdlmjXLZsmTLsg==} peerDependencies: '@types/react': '>= 16.8.0 < 20.0.0' react: '>= 16.8.0 < 20.0.0' @@ -2516,11 +2516,11 @@ packages: react-dom: optional: true - '@docsearch/css@4.6.3': - resolution: {integrity: sha512-nlOwcXcsNAptQl4vlL4MA78qNJKO0Qlds5GuBjCoePgkebTXLSf8Qt1oyZ3YBshYupKXG9VRGEsk1zr23d+bzQ==} + '@docsearch/css@4.7.0': + resolution: {integrity: sha512-Sk5xkdRFeE7PeWjG9l4AfTwdvMfr9wHiwNNCpHXT4v4SNyNMKdHGvEILc31BgaVFGDDNbv5u/a73tofRiwbEZw==} - '@docsearch/react@4.6.3': - resolution: {integrity: sha512-Bg2wdDsoQVlNCcEKuEJAU04tvHCqgx8rIu+uIoM4pRtcx3TBKJuXutJik3LTA8LRc9YEyHkrYUrmcC0D7BYf+g==} + '@docsearch/react@4.7.0': + resolution: {integrity: sha512-x6oedjJ8O8/pIDBsMo5Orca3/6cQCz616/CwthVe68l43mqnj2lrJ9kFQITBqy8hMsS3nWeBWFoVO5dJ1DCFKA==} peerDependencies: '@types/react': '>= 16.8.0 < 20.0.0' react: '>= 16.8.0 < 20.0.0' @@ -12724,19 +12724,19 @@ snapshots: '@discoveryjs/json-ext@0.6.3': {} - '@docsearch/core@4.6.3(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@docsearch/core@4.7.0(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': optionalDependencies: '@types/react': 19.2.17 react: 19.2.8 react-dom: 19.2.8(react@19.2.8) - '@docsearch/css@4.6.3': {} + '@docsearch/css@4.7.0': {} - '@docsearch/react@4.6.3(@algolia/client-search@5.18.0)(@types/react@19.2.17)(algoliasearch@5.18.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(search-insights@2.13.0)': + '@docsearch/react@4.7.0(@algolia/client-search@5.18.0)(@types/react@19.2.17)(algoliasearch@5.18.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(search-insights@2.13.0)': dependencies: '@algolia/autocomplete-core': 1.19.2(@algolia/client-search@5.18.0)(algoliasearch@5.18.0)(search-insights@2.13.0) - '@docsearch/core': 4.6.3(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@docsearch/css': 4.6.3 + '@docsearch/core': 4.7.0(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@docsearch/css': 4.7.0 optionalDependencies: '@types/react': 19.2.17 react: 19.2.8 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index fe9e9686e5a88b..773ce76a4a8318 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -34,7 +34,7 @@ catalogs: docs: stylis: '4.2.0' '@base-ui/react': '^1.6.0' - '@docsearch/react': '^4.6.3' + '@docsearch/react': '^4.7.0' '@emotion/cache': '^11.14.0' '@emotion/react': '^11.14.0' '@emotion/server': '^11.11.0' From ea185e8c289f1d68a6322b865b24e6d35aa01405 Mon Sep 17 00:00:00 2001 From: Lukas Date: Fri, 31 Jul 2026 13:55:19 +0300 Subject: [PATCH 2/5] [docs] Use the catalog for @docsearch/react in the docs package docs/package.json still carried a literal version while every neighbour in the same file, and packages-internal/core-docs, use catalog:docs. It predates the catalog, which arrived with #48243 and never picked this entry up, so each bump had to keep two versions in agreement. Resolution is unchanged (4.7.0); only the lockfile specifier moves to catalog:docs. Co-Authored-By: Claude Opus 5 --- docs/package.json | 2 +- pnpm-lock.yaml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/package.json b/docs/package.json index bc7c20128553ef..0e39734be82ae0 100644 --- a/docs/package.json +++ b/docs/package.json @@ -21,7 +21,7 @@ "@babel/core": "^7.29.7", "@babel/runtime": "^7.29.7", "@base-ui/react": "catalog:docs", - "@docsearch/react": "^4.7.0", + "@docsearch/react": "catalog:docs", "@emotion/cache": "catalog:docs", "@emotion/react": "catalog:docs", "@emotion/server": "catalog:docs", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ad89c04ad926f2..b2cdabcd6382bb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -255,7 +255,7 @@ importers: specifier: catalog:docs version: 1.6.0(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@docsearch/react': - specifier: ^4.7.0 + specifier: catalog:docs version: 4.7.0(@algolia/client-search@5.18.0)(@types/react@19.2.17)(algoliasearch@5.18.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(search-insights@2.13.0) '@emotion/cache': specifier: catalog:docs From e59eea9bf14e896a476f016beb115bd51113dbff Mon Sep 17 00:00:00 2001 From: Lukas Date: Mon, 3 Aug 2026 09:26:03 +0300 Subject: [PATCH 3/5] [core-docs] Let mobile search hits grow with wrapped text v4.7 wraps long hits at <=768px and switches .DocSearch-Hit-Container to height: auto so the row can fit them. Our fixed 52px sits in the unlayered GlobalStyles while the stylesheet is loaded into the docsearch layer, so ours won and the wrapped text overflowed into the next row. Drop the fixed height at the same breakpoint. Co-Authored-By: Claude Opus 5 --- .../core-docs/src/AppLayout/components/AppSearch.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx b/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx index 04e2215f12861e..e375e285034f08 100644 --- a/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx +++ b/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx @@ -643,6 +643,11 @@ export function AppSearch(props: AppSearchProps) { }, '& .DocSearch-Hit-Container': { height: '52px', + // v4.7 wraps long hits below this width and grows the row to fit them, but our + // height sits outside the docsearch layer and would win, so drop it here. + '@media (max-width: 768px)': { + height: 'auto', + }, }, }, '& .DocSearch-Hit a': { From 7d8db3225e875828985b2a5df48ef0925ee02265 Mon Sep 17 00:00:00 2001 From: Lukas Date: Mon, 3 Aug 2026 09:41:38 +0300 Subject: [PATCH 4/5] [core-docs] Set the hit row height through --docsearch-hit-height The 52px came from a height on .DocSearch-Hit-Container, which predates the v4 work and is only 4px off the 56px default. Because it sits in the unlayered GlobalStyles it also beat v4.7's mobile height: auto, so wrapped hits overflowed into the next row. The stylesheet drives that height from --docsearch-hit-height, and v4.7 reuses the same variable as the mobile min-height, so setting the variable keeps the tighter rows and lets rows grow for wrapped text without a breakpoint override. It also lines .DocSearch-Hit-Tree up with the row, which was still using the 56px default. Co-Authored-By: Claude Opus 5 --- .../core-docs/src/AppLayout/components/AppSearch.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx b/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx index e375e285034f08..ff5f58d9a0a21a 100644 --- a/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx +++ b/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx @@ -444,6 +444,10 @@ export function AppSearch(props: AppSearchProps) { '--docsearch-searchbox-focus-background': 'unset', '--docsearch-footer-background': 'unset', '--docsearch-modal-background': (theme.vars || theme).palette.background.paper, + // Slightly tighter rows than the 56px default. Set through the variable rather than + // a height on .DocSearch-Hit-Container, so v4.7 can still grow a row to fit wrapped + // text on small screens (it keeps this as the min-height there). + '--docsearch-hit-height': '52px', // Height left for the scrollable area between the search bar and the footer. v4 // dropped the search box from its own budget, which makes the modal overshoot // --docsearch-modal-height; subtract it again so the modal stays 600px. @@ -641,14 +645,6 @@ export function AppSearch(props: AppSearchProps) { '&:not(:first-of-type)': { marginTop: -1, }, - '& .DocSearch-Hit-Container': { - height: '52px', - // v4.7 wraps long hits below this width and grows the row to fit them, but our - // height sits outside the docsearch layer and would win, so drop it here. - '@media (max-width: 768px)': { - height: 'auto', - }, - }, }, '& .DocSearch-Hit a': { padding: theme.spacing(0.25, 0), From e745a4e8dab808bb0bf060d2e3431a036d7783b0 Mon Sep 17 00:00:00 2001 From: Lukas Date: Mon, 3 Aug 2026 10:00:42 +0300 Subject: [PATCH 5/5] [core-docs] Drop the comment on --docsearch-hit-height Co-Authored-By: Claude Opus 5 --- .../core-docs/src/AppLayout/components/AppSearch.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx b/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx index ff5f58d9a0a21a..2efa9851bc33f9 100644 --- a/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx +++ b/packages-internal/core-docs/src/AppLayout/components/AppSearch.tsx @@ -444,9 +444,6 @@ export function AppSearch(props: AppSearchProps) { '--docsearch-searchbox-focus-background': 'unset', '--docsearch-footer-background': 'unset', '--docsearch-modal-background': (theme.vars || theme).palette.background.paper, - // Slightly tighter rows than the 56px default. Set through the variable rather than - // a height on .DocSearch-Hit-Container, so v4.7 can still grow a row to fit wrapped - // text on small screens (it keeps this as the min-height there). '--docsearch-hit-height': '52px', // Height left for the scrollable area between the search bar and the footer. v4 // dropped the search box from its own budget, which makes the modal overshoot