Package code page: mobile version improvements

[alex-key]

Describe the bug

There are several issues in mobile version of package-code page (nuxt@4.3.1)

• In bigger files with 1000+ lines "Scroll to top" button becomes two-lines, which makes the whole row wider and does not look good (SS1). Proposal: For mobile devices use "To top" copy or just move button next to "Open files" button on bottom right of the screen (which imo is more intuitive placement of that button on mobile) Example from nitro

• In Readme file we have additional switcher - group of 2 buttons which breaks the design, raw button pushed out of viewport (SS2). Proposal: use only icons for the switcher and make it compact OR break into 2 lines Example from nitro
• Longer folder names becomes could increase navigation row hieight x3 (and more) (SS3). Proposal: use truncation OR break navigation row into multiple rows and keep each individual item single line (and maybe also use truncation for super-long folder names) Example from core-js
• (to discuss) I think we should find something better than "root" name for the root folder (SS4). For me this "root" does not feel intuitive at all. Proposal: use package name OR use "@" OR use some icon instead (Home or Folder)
• [both desktop and mobile] Even files with a short content still have scrolling for no reason (SS5) Example from nitro
• [both desktop and mobile] Skeleton loaders should be shown instead of empty state on page refresh. Optional: empty state for a file should be "No such file" (SS6) Example from nitro

Additional context

Used Chrome mobile emulator for Galaxy S20 Ultra

Screenshots

SS1 - Action buttons row

SS2 - Readme additional buttons

SS3 - Long directory names

SS4 - Root?

SS5 - Useless scroll

SS6 - Empty state is shown on loading

[alex-key]

@alexdln Would love to have your comments on proposals above

[alexdln]

Great issues, thank you ❤️

I was thinking about something like this. Actions via icon-button. Size and lines count down the right (usual for devs). Both the bottom and top panels are always sticky. There's no scrolling within the code - it's part of the page. On mobile devices, only the root and the current file are shown, and between the clickable ellipsis and in the dropdown all the paths between will be shown

[alex-key]

Thank you for the feedback
Your mockup looks great: cleaner and many issues are fixed. I like placing lines and size panel on the bottom.
I still think that we should use smth better than root word.
Also a version with readme switcher is needed. Thanks!

[alexdln]

We can generally use the home icon instead of root - it's a fairly standard practice. But not the package name, otherwise it could take up all the space

About more actions - looks like we should change layout on mobile

[alex-key]

@alexdln DId you finalize the mockup? Could you post a Figma link (if any)?

[alex-key]

I have a draft design spec from Alex, will work on the changes