Skip to content

[BUG] Bottom section UI overlap/misalignment on Dashboard (mobile view) #1170

Description

@dev-2006-prt

##Summary

On the Dashboard page (mobile view), elements in the bottom "Status Profile" section overlap and are inconsistently spaced, making the UI look broken near the bottom navigation bar.
Why this matters
This is a first-impression, high-visibility area of the app (the main Dashboard), and the overlap makes the bottom nav harder to read/use on mobile, which hurts usability and looks unpolished to new users/contributors.

##Reproduction steps

Go to the Dashboard page (/dashboard)
View it on a mobile viewport (or resize browser to mobile width, e.g. via DevTools device toolbar)
Scroll down to the "Status Profile" section showing "Severe" status and "CRITICAL VULNS"
Observe overlapping/misaligned elements near the bottom, especially around the "ATTENTION REQUIRED" label and the bottom nav bar

##Expected behavior

The "ATTENTION REQUIRED" label and any status text should not overlap the bottom navigation bar
All bottom nav items (Dashboard, Scans, Findings, Reports, Workflows) should be evenly aligned with consistent label spacing and an active-state highlight that stays within its container
The "CRITICAL VULNS" label and its corresponding count (e.g. "1") should be visually grouped together with even, readable spacing — not cramped above and overly spaced below

##Actual behavior

"ATTENTION REQUIRED" text overlaps/collides with the bottom nav bar, partially covering a nav label
The "DASHBOARD" nav item's active-state highlight appears to spill outside its container, and its label looks misaligned compared to other nav items
Spacing between the status description text and "CRITICAL VULNS" is too tight, while spacing between "CRITICAL VULNS" and the large red "1" counter is too large, breaking the visual relationship between them

##Scope

Suggested files or directories: Dashboard page component and its associated CSS/styles; bottom navigation bar component
Related route, page, component, or script: Dashboard page (/dashboard), bottom nav component

##Evidence

Image

##Environment
Page: /dashboard
Viewport: Mobile

Definition of done

Use this section if you already know what a complete fix should include:

  • Bug is reproducible from the issue description
  • Root cause is fixed
  • Relevant tests are added or updated
  • Docs are updated if setup or behavior changed

Metadata

Metadata

Assignees

No one assigned

    Labels

    priority:mediumImportant issue with normal urgencytype:bugBug fix work category bonus label

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions