Skip to content

[BUG][UI/UX] Layout Overlap Between TIME_MATRIX and DELETE_RECORD Component in Scan Cards #906

Description

A critical layout bug exists in the Operational Registry scan cards. When a scan is completed (e.g., the Nuclei scan component), the TIME_MATRIX metadata section, the DELETE_RECORD button, and the execution timestamps (IN_LOCK) collide and overlap horizontally.

Target Component: Operational Registry Card Layout (/scans route)

Environment: Desktop / Responsive Viewport

Visual Flaw: The DELETE_RECORD red button is rendered directly on top of the TIME_MATRIX label and the 17:52:55 timestamp, making the text unreadable and breaking the UI alignment.

Image

Steps to Reproduce
Navigate to the Operational Registry (/scans).

Locate a completed scan entry (like the Nuclei scan).

Observe the bottom utility bar containing SIGNAL_METADATA and TIME_MATRIX.

See the overlapping elements in the center block.

Expected Behavior
The elements should be cleanly separated using a responsive flexbox or grid layout. The TIME_MATRIX labels/timestamps and the action buttons (DELETE_RECORD, RESCAN_SIGNAL) should have explicit spacing/margins and wrap cleanly to a new line if viewport space is restricted.

Proposed Fix
Inspect the CSS/Tailwind classes governing the lower panel of the scan card component.

Remove any hardcoded negative margins or incorrect absolute positioning causing the overlap.

Apply proper flex utility classes (e.g., flex flex-wrap items-center gap-4) to ensure independent elements remain distinct.

GSSoC Checklist
[x] I am a GSSoC 2026 Contributor.

[x] I have checked existing issues and this is not a duplicate.

[ ] Please assign this issue to me so I can fix this layout constraint.

Metadata

Metadata

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions