Security Dashboard: responsive layout

Problem

We are revising our layout and adding new sections: https://gitlab.com/gitlab-org/gitlab-ee/issues/12846 (related: https://gitlab.com/gitlab-org/gitlab-ee/issues/12881), and https://gitlab.com/gitlab-org/gitlab-ee/issues/11190, and https://gitlab.com/gitlab-org/gitlab-ee/issues/13298. Need responsive layout consideration in how to handle new sections: (https://gitlab.com/gitlab-org/gitlab-ee/issues/11190, and https://gitlab.com/gitlab-org/gitlab-ee/issues/13298).

Proposed Solution

breakpoint TBD breakpoint TBD div.container-fluid min-width: 1280px; (desktop)
1 2 3
Key
  1. Filters and header
  2. Vulnerability Table
  3. Trends over time https://gitlab.com/gitlab-org/gitlab-ee/issues/12846 & https://gitlab.com/gitlab-org/gitlab-ee/issues/12881
  4. Most affected projects https://gitlab.com/gitlab-org/gitlab-ee/issues/11190
  5. Out of date and untested projects https://gitlab.com/gitlab-org/gitlab-ee/issues/13298
Decisions
  • Establish breakpoints degradation/enhancement (per FE meeting discussion: use default breakpoints )
original proposal
Breakpoint TBD (mobile) Breakpoint TBD (Tablet) container min-width: 1280px; (desktop)
1 2 3
4 AND 5 are not displayed 4 OR 5 are not displayed desktop layout based on https://gitlab.com/gitlab-org/gitlab-ee/issues/12846 implementation
Key
  1. Filters and header
  2. Vulnerability Table
  3. Trends over time https://gitlab.com/gitlab-org/gitlab-ee/issues/12846 & https://gitlab.com/gitlab-org/gitlab-ee/issues/12881
  4. Most affected projects https://gitlab.com/gitlab-org/gitlab-ee/issues/11190
  5. Out of date and untested projects https://gitlab.com/gitlab-org/gitlab-ee/issues/13298

Decisions

  • Establish breakpoints degradation/enhancement of sections
  • Do we want to display 4 and 5 at non-desktop viewport sizes? Why?
  • If we display 4 or 5 at tablet+: what is prioritized to view?
Edited by Kyle Mann