feat: responsive security view IN-1072#1852
Conversation
Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
There was a problem hiding this comment.
Pull request overview
Implements a mobile-responsive layout for the Project “Security & Best Practices” view, including responsive vulnerability stats, charts, recent vulnerabilities list, and a mobile-friendly filtering experience in the vulnerabilities drawer (IN-1072).
Changes:
- Updated Security controls assessment layout to stack appropriately on mobile.
- Refactored vulnerabilities UI for mobile (2×2 stats grid, stacked charts, card-style rows, hidden desktop table header).
- Added a mobile “Filters” popover in the vulnerabilities drawer with grouped options plus Reset/Apply actions and updated spacing/dividers.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/app/components/modules/project/views/security.vue | Tweaks responsive spacing for the security assessment split layout. |
| frontend/app/components/modules/project/components/security/evaluation-section-row.vue | Makes control assessment rows stack vertically on mobile; aligns the button under the text. |
| frontend/app/components/modules/project/components/vulnerabilities/vulnerabilities-section.vue | Adjusts vulnerabilities section card padding/typography and stacks charts on mobile. |
| frontend/app/components/modules/project/components/vulnerabilities/vulnerability-summary.vue | Converts summary stats to a responsive 2×2 grid on mobile with scaled typography. |
| frontend/app/components/modules/project/components/vulnerabilities/vulnerability-severity.vue | Responsive padding/typography tweaks for severity chart card. |
| frontend/app/components/modules/project/components/vulnerabilities/vulnerability-ecosystem.vue | Responsive padding/typography tweaks for ecosystem chart card. |
| frontend/app/components/modules/project/components/vulnerabilities/vulnerability-drawer.vue | Updates drawer paddings to support the new mobile filter layout and spacing. |
| frontend/app/components/modules/project/components/vulnerabilities/vulnerability-filters.vue | Adds mobile popover-based grouped filters (Severity/Ecosystem/Status) with Reset/Apply; refines spacing and sort trigger sizing. |
| frontend/app/components/modules/project/components/vulnerabilities/vulnerability-table-header.vue | Hides table header on mobile (desktop-only header). |
| frontend/app/components/modules/project/components/vulnerabilities/vulnerability-row.vue | Introduces mobile card layout while preserving the existing desktop table row layout. |
| frontend/app/components/modules/project/components/vulnerabilities/vulnerability-row-loading.vue | Adds mobile skeleton card layout alongside the existing desktop skeleton row. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div | ||
| v-for="option in severityOptions" | ||
| :key="`sev-${option.value}`" | ||
| class="c-dropdown__item" | ||
| :class="{ 'is-selected': severityCache === option.value }" | ||
| @click="severityCache = option.value" | ||
| > |
There was a problem hiding this comment.
In the mobile filters popover, each selectable option is rendered as a plain <div> with an @click handler. This isn’t keyboard-accessible (no focus target / Enter/Space handling) and can trip a11y expectations. Use semantic interactive elements (e.g., button/input type="radio") or add appropriate role, tabindex="0", and key handlers so the options can be operated via keyboard/screen readers.
| <div class="flex flex-col h-full"> | ||
| <!-- Header --> | ||
| <div class="px-6 py-5"> | ||
| <div class="px-4 md:px-6 pt-5 pb-0 pr-14"> |
There was a problem hiding this comment.
The header padding mixes px-* with an additional unscoped pr-14, which overrides the right padding from px-* and makes the intended spacing harder to reason about. Consider switching to explicit pl-* + pr-* (and, if needed, responsive md:pr-*) to avoid conflicting Tailwind utilities and keep the header alignment intentional.
| <div class="px-4 md:px-6 pt-5 pb-0 pr-14"> | |
| <div class="pl-4 pr-14 md:pl-6 md:pr-14 pt-5 pb-0"> |
joanagmaia
left a comment
joanagmaia
left a comment
There was a problem hiding this comment.
- Font-sizes and colors do not seem to be matching the design.
- Font-weight and even font-family look off.
- Please also confirm spacings
Main KPIs
- Font-sizes are not ok
- Font color is not ok
- Spacing, placement of items does not look ok
Implementation
#### Design
Vulnerabilities by severity
- Font-sizes are not ok
- Font color is not ok
Implementation
#### Design
Vulnerabilities by ecosystem
- Font-sizes are not ok
- Chart x axis looks broken
Implementation
#### Design
Recent vulnerabilities
- Font-sizes are not ok
- Font-weights also don't look good
Implementation
#### Design
Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
Summary
Changes
app/components/modules/project/views/security.vueapp/components/modules/project/components/security/evaluation-section-row.vueapp/components/modules/project/components/vulnerabilities/vulnerabilities-section.vueapp/components/modules/project/components/vulnerabilities/vulnerability-summary.vueapp/components/modules/project/components/vulnerabilities/vulnerability-severity.vueapp/components/modules/project/components/vulnerabilities/vulnerability-ecosystem.vueapp/components/modules/project/components/vulnerabilities/vulnerability-drawer.vueapp/components/modules/project/components/vulnerabilities/vulnerability-filters.vueapp/components/modules/project/components/vulnerabilities/vulnerability-table-header.vueapp/components/modules/project/components/vulnerabilities/vulnerability-row.vueapp/components/modules/project/components/vulnerabilities/vulnerability-row-loading.vueTest plan