UI Bug: Dashboard Layout Broken — Large Empty Space & Misaligned Sections #643
Description
Page: Dashboard
Component: Budget Overview, Financial Goals, Add Transaction, Quick Actions
Description
The dashboard layout is breaking and leaving a huge empty black area in the center of the page. Key sections are misaligned and pushed to the edges, making the UI look incomplete and unbalanced.
Specific issues visible:
Budget Overview stuck to the far left
Financial Goals stuck to the far right
Very large unused empty space in the center
Quick Actions floating in the middle with no container alignment
Add Transaction form partially detached from main layout
This makes the dashboard look broken and unprofessional, especially on larger screens.
Steps to Reproduce
Open the Dashboard page.
View on desktop / large screen.
Scroll to Budget Overview & Financial Goals section.
Expected Behavior
Budget Overview and Financial Goals should be in a proper grid or two-column layout
Content should be centered and evenly spaced
No large empty unused area
Quick Actions should be inside a clearly defined section container
Add Transaction form should align with main dashboard content
Actual Behavior
Content is spread to extreme left and right
Center area is empty
Sections appear detached and misaligned
Likely Causes
Broken CSS grid or flex container
Missing max-width + margin: auto
Incorrect position: absolute usage
Media query / responsive breakpoint issues
