From 3bb661a57e7ea243d5813335809f8b662eafc533 Mon Sep 17 00:00:00 2001 From: MarketDataApp Date: Fri, 6 Mar 2026 17:48:06 -0300 Subject: [PATCH 1/3] fix: target flex-level container in navbar overflow selector The overflow JS was hiding .user-profile-wrapper (inner div) but its parent .user-profile-container (the actual flex item) remained visible, so the login button was never removed from the navbar on mobile. --- src/clientModules/navbarOverflow.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/clientModules/navbarOverflow.js b/src/clientModules/navbarOverflow.js index 6c3c2b7..c95a03e 100644 --- a/src/clientModules/navbarOverflow.js +++ b/src/clientModules/navbarOverflow.js @@ -10,7 +10,7 @@ export function onRouteDidUpdate() { items: [ // Priority order: lowest number = hidden first { selector: '.navbar__items--right [class*="colorModeToggle"]', priority: 1 }, - { selector: '.user-profile-wrapper', priority: 2 }, + { selector: '.user-profile-container', priority: 2 }, { selector: '.navbar__items--right .DocSearch-Button', priority: 3 }, ], }); From c7773b882158642a75aa3615231ac43a535ffe0b Mon Sep 17 00:00:00 2001 From: MarketDataApp Date: Fri, 6 Mar 2026 17:55:25 -0300 Subject: [PATCH 2/3] fix: re-check navbar overflow when async components render The overflow utility's ResizeObserver only fires when the container resizes, but async-loaded components (user profile) add content without changing container dimensions. Add a MutationObserver that re-initializes the overflow handler when child nodes change in the navbar. --- src/clientModules/navbarOverflow.js | 30 ++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/clientModules/navbarOverflow.js b/src/clientModules/navbarOverflow.js index c95a03e..0a042c5 100644 --- a/src/clientModules/navbarOverflow.js +++ b/src/clientModules/navbarOverflow.js @@ -1,17 +1,29 @@ import { initNavbarOverflow } from '@marketdataapp/ui/navbar-overflow'; +const ITEMS = [ + // Priority order: lowest number = hidden first + { selector: '.navbar__items--right [class*="colorModeToggle"]', priority: 1 }, + { selector: '.user-profile-container', priority: 2 }, + { selector: '.navbar__items--right .DocSearch-Button', priority: 3 }, +]; + export function onRouteDidUpdate() { const container = document.querySelector('.navbar__inner'); if (!container || container._overflowInit) return; container._overflowInit = true; - initNavbarOverflow({ - container, - items: [ - // Priority order: lowest number = hidden first - { selector: '.navbar__items--right [class*="colorModeToggle"]', priority: 1 }, - { selector: '.user-profile-container', priority: 2 }, - { selector: '.navbar__items--right .DocSearch-Button', priority: 3 }, - ], - }); + let cleanup = initNavbarOverflow({ container, items: ITEMS }); + + // The overflow utility's ResizeObserver only fires when the container + // itself resizes, but async-loaded components (e.g. user profile) can + // add content without changing the container's dimensions. Watch for + // child-list mutations and re-initialize to trigger a fresh reflow. + let debounce; + new MutationObserver(() => { + clearTimeout(debounce); + debounce = setTimeout(() => { + cleanup(); + cleanup = initNavbarOverflow({ container, items: ITEMS }); + }, 100); + }).observe(container, { childList: true, subtree: true }); } From f977af6f2bd514709d81e278a809ffedb29a2cec Mon Sep 17 00:00:00 2001 From: MarketDataApp Date: Fri, 6 Mar 2026 18:32:10 -0300 Subject: [PATCH 3/3] chore: bump @marketdataapp/ui to v2.10.1, remove local workarounds v2.10.1 adds MutationObserver for async child content (#8) and sets login-pill-sized min-width on user-profile-container (#9). Removes our local MutationObserver workaround and CSS min-width override. --- src/clientModules/navbarOverflow.js | 30 +++++++++-------------------- yarn.lock | 4 ++-- 2 files changed, 11 insertions(+), 23 deletions(-) diff --git a/src/clientModules/navbarOverflow.js b/src/clientModules/navbarOverflow.js index 0a042c5..c95a03e 100644 --- a/src/clientModules/navbarOverflow.js +++ b/src/clientModules/navbarOverflow.js @@ -1,29 +1,17 @@ import { initNavbarOverflow } from '@marketdataapp/ui/navbar-overflow'; -const ITEMS = [ - // Priority order: lowest number = hidden first - { selector: '.navbar__items--right [class*="colorModeToggle"]', priority: 1 }, - { selector: '.user-profile-container', priority: 2 }, - { selector: '.navbar__items--right .DocSearch-Button', priority: 3 }, -]; - export function onRouteDidUpdate() { const container = document.querySelector('.navbar__inner'); if (!container || container._overflowInit) return; container._overflowInit = true; - let cleanup = initNavbarOverflow({ container, items: ITEMS }); - - // The overflow utility's ResizeObserver only fires when the container - // itself resizes, but async-loaded components (e.g. user profile) can - // add content without changing the container's dimensions. Watch for - // child-list mutations and re-initialize to trigger a fresh reflow. - let debounce; - new MutationObserver(() => { - clearTimeout(debounce); - debounce = setTimeout(() => { - cleanup(); - cleanup = initNavbarOverflow({ container, items: ITEMS }); - }, 100); - }).observe(container, { childList: true, subtree: true }); + initNavbarOverflow({ + container, + items: [ + // Priority order: lowest number = hidden first + { selector: '.navbar__items--right [class*="colorModeToggle"]', priority: 1 }, + { selector: '.user-profile-container', priority: 2 }, + { selector: '.navbar__items--right .DocSearch-Button', priority: 3 }, + ], + }); } diff --git a/yarn.lock b/yarn.lock index 7103f06..7efd971 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1725,8 +1725,8 @@ integrity sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw== "@marketdataapp/ui@github:MarketDataApp/ui#main": - version "2.10.0" - resolved "https://codeload.github.com/MarketDataApp/ui/tar.gz/b15781c60d5301c94b8b7bc292da5fcf1a871682" + version "2.10.1" + resolved "https://codeload.github.com/MarketDataApp/ui/tar.gz/328533f0d7a2afb776b45ea08b17a4b2445d6199" "@mdx-js/mdx@^3.0.0": version "3.1.1"