Mobile View Fix for bottom sidebar

[Carla-Moz]

Please open the profile setting your screen on mobile view: Deploy preview

For review: please look at this most relevant commit: removed media queries & reponsive tab bar component; made the tab and stack menus scroll horizontally; sidebar closed on mobile breakpoint

Offered solution:

• Close the sidebar on mobile breakpoint
• Make the tab bar and stack menu scroll horizontally within the defined width.

Screenshot and video:

ProfilerMobile.mov

[codecov]

Codecov Report

Attention: Patch coverage is 95.83333% with 1 line in your changes missing coverage. Please review.

Project coverage is 86.04%. Comparing base (fbc7d79) to head (3c2a3e1).

Files with missing lines	Patch %	Lines
src/components/app/Details.js	85.71%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5428   +/-   ##
=======================================
  Coverage   86.03%   86.04%           
=======================================
  Files         312      312           
  Lines       30365    30388   +23     
  Branches     8299     8304    +5     
=======================================
+ Hits        26126    26148   +22     
- Misses       3645     3646    +1     
  Partials      594      594           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[mstange]

I think we should do this work in two steps:

First, make it so that the layout remains sturdy even with small viewports. By sturdy I mean that no circles get squished, no text labels wrap, no extra spaces appear, and you can never scroll to unintended gaps. So the first milestone would be something that looks and feels robust but which makes many things inaccessible because they get clipped off. We can add overflow-x: auto; scrollbar-width: none in some cases to make the clipped-off content reachable, for example for the panel tabs.

Once this is achieved, we can do the second step: Introduce wrapping flex in some places where we want wrapping to happen, and introduce media queries and custom "small screen" layout where it makes sense.

But in the first step there shouldn't be any media queries yet.

[julienw]

I don't mind Markus plan on the long run, but I think I'd be fine with some early quick fixes too.
I'd like that the users can easily see the timeline, or reach the marker table, for example. This would make it possible to look at things from mobile even if things are not "nice" yet.

I didn't look at the exact CSS because it's still a draft, just left a few surprises and comments.

[julienw]

I'm very surprised that adding a media query inside the css rule works at all. I don't see any documentation about this syntax...

I mean:

.classrule {
  @media query {
  }
}

I thought @media queries always need to be top-level:

@media query {
  .classrule {
  }
}

But I'm fine with the syntax if it's supported broadly!

[julienw]

Ah I see this is pretty new and comes with CSS nesting:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Nesting_at-rules

This seems to be quite well supported: https://caniuse.com/?search=CSS%20nesting but still a bit early.

For example it's not in the older Firefox ESR (v115) that is still supported by Mozilla. So I think we'd need to add https://www.npmjs.com/package/postcss-nesting to our postcss configuration to be able to use it for now. What do you think?

[Carla-Moz]

Yes, to accommodate the older versions, I'll add postcss-nesing package. Fair enough.

[julienw]

it looks like your IDE's formatting configuration changes things that you don't touch otherwise (see also the changes to Details above), and that are not necessary. While I don't really mind, this makes the patches more difficult to review.

[Carla-Moz]

Yes, it's not intentional. It's hard to catch these file changes when I run the lint commands. I'll keep an eye out in the future.

[Carla-Moz]

I think we should do this work in two steps:

First, make it so that the layout remains sturdy even with small viewports. By sturdy I mean that no circles get squished, no text labels wrap, no extra spaces appear, and you can never scroll to unintended gaps. So the first milestone would be something that looks and feels robust but which makes many things inaccessible because they get clipped off. We can add overflow-x: auto; scrollbar-width: none in some cases to make the clipped-off content reachable, for example for the panel tabs.

Once this is achieved, we can do the second step: Introduce wrapping flex in some places where we want wrapping to happen, and introduce media queries and custom "small screen" layout where it makes sense.

But in the first step there shouldn't be any media queries yet.

I see. I'll consider the robustness of the layout while I work through this PR.