Follow-up from "Fluid and fixed breadcrumbs for super sidebar toggle"

Problem to solve

To prevent further delaying an improvement to most pages in GitLab, the following outstanding usability issues from !114676 (merged) should be addressed:

• Switching from overview to changes in a merge request (comment) Switching from overview to changes in a merge r... (#408247 - closed)

• Sidebar can go missing on these pages (comment) Super sidebar toggle button when HAML breadcrum... (#406520 - closed)

  Here are some pages where if I collapse the sidebar, or view the page on a viewport that doesn't show the sidebar by default, I can't get it back. The breadcrumbs are also not sticky. http://127.0.0.1:3000/projects/new

  • http://127.0.0.1:3000/projects/new#blank_project
  • http://127.0.0.1:3000/projects/new#create_from_template
  • http://127.0.0.1:3000/projects/new#import_project
  • http://127.0.0.1:3000/projects/new#cicd_for_external_repo

• Breadcrumb is not sticky, or only partially stick (comment) Breadcrumb is not sticky, or only partially sti... (#408251 - closed)

  Here are some pages I found where the breadcrumb is not sticky, or only partially stick, (mostly tested with page loading at 375px viewport width, tested with performance bar and site header enabled):

  • http://127.0.0.1:3000/-/operations/environments (if you load the page at a small viewport, if you resize after load sticky works)
  • http://127.0.0.1:3000/-/operations (if you load the page at a small viewport, if you resize after load sticky works)
  • Group level Compliance report > Frameworks http://127.0.0.1:3000/groups/flightjs/-/security/compliance_dashboard/frameworks
  • When there is an error message present on http://127.0.0.1:3000/groups/flightjs/-/security/policies/new?type=scan_result_policy
  • With performance bar, and site header enabled I would get weird behavior on some tabs http://127.0.0.1:3000/groups/flightjs/-/analytics/ci_cd?tab=time-to-restore-service
  • http://127.0.0.1:3000/groups/flightjs/-/contribution_analytics
  • http://127.0.0.1:3000/groups/flightjs/-/settings/access_tokens
  • Only on seats tab http://127.0.0.1:3000/groups/flightjs/-/usage_quotas#seats-quota-tab
  • With performance bar, and site header enabled I would get weird behaviour on http://127.0.0.1:3000/flightjs/Flight/-/settings/merge_requests
  • http://127.0.0.1:3000/flightjs/Flight/-/settings/repository#js-branch-rules
  • http://127.0.0.1:3000/flightjs/Flight/-/new/master/
  • Try and resolve a MR conflict in the UI http://127.0.0.1:3000/flightjs/Flight/-/merge_requests/9/conflicts
  • compare revisions http://127.0.0.1:3000/flightjs/Flight/-/compare/master...fix%2Funbind-from-proxy-281?from_project_id=7&straight=false
  • http://127.0.0.1:3000/flightjs/Flight/-/packages
  • http://127.0.0.1:3000/flightjs/Flight/-/pipelines/charts?chart=deployment-frequency
  • http://127.0.0.1:3000/flightjs/Flight/-/pipelines/charts?chart=lead-time
  • http://127.0.0.1:3000/flightjs/Flight/-/pipelines/charts?chart=time-to-restore-service
  • http://127.0.0.1:3000/flightjs/Flight/-/pipelines/charts?chart=change-failure-rate
  • http://127.0.0.1:3000/flightjs/Flight/-/settings/access_tokens
  • http://127.0.0.1:3000/flightjs/Flight/-/settings/repository Note: some of these are fully not sticky, others will show the bottom half of the breadcrumbs and the top half will scroll out of the viewport.

• Instances where the breadcrumb covers page elements it shouldn't (comment) (Fixed in related MR)

  Here are instances where the breadcrumb covers page elements it shouldn't.

  Bulk edit issues:

  1. Set viewport less than 768px width
  2. Go to a groups issue list, for example http://127.0.0.1:3000/groups/flightjs/-/issues
  3. 'Edit issues' button
  4. Drawer opens, but Update all and Cancel options hidden.

• Reasonably frequently when using the browser back button I'd get into states where I couldn't expand the sidebar. (comment)

  Reasonably frequently when using the browser back button I'd get into states where I couldn't expand the sidebar. A refresh would fix it.

  I couldn't reliably reproduce this. But it happened ~6 times over the 2 hours I spent looking at the app at 375px.