[UI] Ensure Graph Explorer is responsive on common screen sizes

[RabebOthmani]

As a user, I want an optimal UI experience no matter what device I'm using
So I can fully take advantage of the tool and focus on my learning experience

Acceptance Criteria

• Define list of most used devices for Graph Explorer
• Define list of common screen sizes
• Produce design stylesheet covering all responsiveness scenarios ( resize, shrink, enlarge, hide, etc)
• Apply responsive design stylesheet on the current layout. #1531
• Add automated testing for responsiveness #1532

Design Resources

• Fluent UI Type Ramp
• Grid layout guidance
• nav controls

[ElinorW]

• Common devices used include: phones, tablets, laptops and desktop monitors.

• Screen sizes according to this would be:
  : 1920px for very large screens
  : 1366px - 1919px for extra extra large screens
  : 1024px - 1365px for extra large screens
  : 640px - 1023px for large screens
  : 480px - 639px - for medium screens

• We use bootstrap which already comes with the a set stylesheet covering all responsive scenarios.

My idea was to ensure everything is wrapped in bootstrap containers/row/columns so that was we don't have to individually configure each component on the screen.
From my observations, with the work that was done on resizing, the containers/rows/columns have already been put in place.

[ElinorW]

A screenshot to support this

The full page is contained in the bootstrap container that comes with a grid stylesheet

[RabebOthmani]

Hi @ElinorW @thewahome , I'll leave it to you to make the technical decision. Here are some of the things I saw that led me to assume it is maybe related to responsiveness.
For example, the permission tab is not rendering properly and behaves differently between Edge and Chrome on the same machine. (cc @Onokaev )
The pane that contains the response, code snippets etc is not showing me all tabs on a 15" screen which is a very common screen . Also when you start zooming in/out, scrolling and expanding panes, a lot of the elements on the screen won't render properly (text boxes, button, etc)

[ElinorW]

Hey @RabebOthmani,
Thank you for pointing some of these issues out.
Regarding the permissions, from the shared screenshot, is the difference you are pointing out to do with the added column? The status column appears when a user is signed in and this affects the message displayed under the Permissions as well.

The tabs get folded in when there isn't enough space for it. This is actually a responsive feature introduced by Fluent UI.

I'm not to clear on the last screenshot, could you explain a little more about what is expected?

[adhiambovivian]

@RabebOthmani we need to define responsive design baseline requirements to guide the implementation details:

• Browser experience: Browser target baselines
• If GE should be responsive on tablet/ mobile view
• Responsiveness for different screen sizes, resolutions, different browsers, & Zoom in & Zoom out support

[RabebOthmani]

@adhiambovivian I've already started the conversation with the UX team. I'll work with Lisa on this and provide the team with more details

[RabebOthmani]

The recommendation from the UX team is to use 1873W x 947H
More details here https://gs.statcounter.com/screen-resolution-stats

[gavinbarron]

@RabebOthmani @adhiambovivian @ElinorW this is a great discussion to be having and an area that we can improve on.
One thing that can make responsive design even more challenging is that Windows will set a default zoom level on high resolution screens that can cause your screen to render the page as though it were much smaller.
e.g.

Causes the GE page to render on my screen as though it were only ~1200px wide:

Given this it's really important that we ensure that we look at the effective resolution when raising this kind of issue.

[ElinorW]

This is completed now