Fix Dashboard Layout Structure for Budget, Goals & Quick Actions #649
+161
−1
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@Eshajha19 is attempting to deploy a commit to the Renu's projects Team on Vercel. A member of the Team first needs to authorize it. |
🎉 Thanks for the PR, @Eshajha19!We really appreciate you taking the time to contribute to ExpenseFlow! 💙 ⭐ Love this project?Please give us a star! It helps the project grow and reach more developers! 🌟 🔗 https://github.com/Renu-code123/ExpenseFlow ✅ PR ChecklistBefore we review, please ensure:
🙌 Thank You for Contributing!We truly appreciate your interest in contributing to this project.
We'll review your PR as soon as possible. Keep up the great work! ✨ |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR fixes a broken dashboard layout where Budget Overview, Financial Goals, and Quick Actions were misaligned and rendering as raw stacked text. The issue was caused by missing structural grouping and inconsistent card wrappers.
What Was Fixed
✅ Wrapped all major dashboard sections in consistent .dashboard-card containers
✅ Grouped Budget Overview and Financial Goals into a dedicated .dashboard-row
✅ Ensured Quick Actions renders as a full-width, standalone dashboard section
✅ Improved semantic HTML structure for better grid/flex compatibility
✅ Prevented layout collapse when multiple cards exist in the same grid
Before
Budget and Goals sections dropped below the grid
Quick Actions floated without a proper container
Sections appeared as unstyled text blocks
After
Budget and Goals display side-by-side in a structured row
Quick Actions displays as a proper full-width card
Consistent spacing and alignment across dashboard sections
Files Changed
dashboard.html — Restructured
layoutdashboard.css — Added .dashboard-row grid rule and standardized card wrappers
Related Issues
Fixes broken layout for:
Budget Overview panel
Financial Goals panel
Quick Actions section
Screenshots
This PR #649 closes issue #643