Main
In the header update PR (#2035), I redesigned the UI, and to make it stable - I only made the navigation bar sticky, not package name row. The problem is that the package name varies widely, and can include organization or simply be too long
Examples
https://npmxdev-git-fork-alexdln-feat-package-header-ui-npmx.vercel.app/package/zowe-revolutionizes-mainframe-devops-with-seamless-integration-streamlining-workflows-enabling-collaboration-automating-processes-enhancing-efficiency-and-accelerating-software-delivery-for-enhanced-business-value
https://npmxdev-git-fork-alexdln-feat-package-header-ui-npmx.vercel.app/package/this-package-exports-the-number-214-and-its-name-is-also-two-hundred-and-fourteen-characters-long-which-is-the-longest-name-currently-allowed-by-the-npm-registry-to-see-how-a-name-that-long-would-look-if-you-did-it
Details
New UI implemented a stable and reusable layout with maximum reading space. However, this meant hiding the package name on scroll. For many, this breaks their habits and feels like the name should always be visible, for example, when returning to another tab.
However, due to the names difference, this is difficult to do reliably without blocking half the screen. Cropping the name is also difficult, as it requires a mechanism to display it in full, which adds additional complexity and a11y risks.
By making different positions, the user will experience a jump in the interface, which increases the risk of misclicks and simply creates a questionable experience (and the jump width varies from package to package).
A bit more details and thoughts in the discord thread
RFC
As a result, we need to find a suitable, stable and accessible way to display the package name, among other things
Main
In the header update PR (#2035), I redesigned the UI, and to make it stable - I only made the navigation bar sticky, not package name row. The problem is that the package name varies widely, and can include organization or simply be too long
Examples
https://npmxdev-git-fork-alexdln-feat-package-header-ui-npmx.vercel.app/package/zowe-revolutionizes-mainframe-devops-with-seamless-integration-streamlining-workflows-enabling-collaboration-automating-processes-enhancing-efficiency-and-accelerating-software-delivery-for-enhanced-business-value
https://npmxdev-git-fork-alexdln-feat-package-header-ui-npmx.vercel.app/package/this-package-exports-the-number-214-and-its-name-is-also-two-hundred-and-fourteen-characters-long-which-is-the-longest-name-currently-allowed-by-the-npm-registry-to-see-how-a-name-that-long-would-look-if-you-did-it
Details
New UI implemented a stable and reusable layout with maximum reading space. However, this meant hiding the package name on scroll. For many, this breaks their habits and feels like the name should always be visible, for example, when returning to another tab.
However, due to the names difference, this is difficult to do reliably without blocking half the screen. Cropping the name is also difficult, as it requires a mechanism to display it in full, which adds additional complexity and a11y risks.
By making different positions, the user will experience a jump in the interface, which increases the risk of misclicks and simply creates a questionable experience (and the jump width varies from package to package).
A bit more details and thoughts in the discord thread
RFC
As a result, we need to find a suitable, stable and accessible way to display the package name, among other things