UI Enhancement: Redesign Expense Approval Page Layout for Better Alignment & Spacing

[Riya-Kharade]

📝 Description

This PR improves the overall layout, alignment, and visual consistency of the Expense Approval page.

🔄 Before

• Title was not centered.
• CSS from dashboard/home was not properly applied.
• Cards were sticking together.
• Spacing and padding were inconsistent.
• Layout looked cramped and unstructured.
• Sections were not visually separated.

✅ After

• Center-aligned and redesigned "Expense Approvals" heading.
• Added subtitle with improved typography.
• Applied consistent dashboard theme styles.
• Introduced structured card layout with proper spacing.
• Added container wrapper with max-width.
• Improved section separation (Summary, Pending Review, My Submissions).
• Enhanced visual hierarchy and readability.
• Improved responsiveness across screen sizes.

This PR affects the Vanilla JS frontend (UI layer only).

---

🔗 Related Issue

Fixes #692

---

🛠️ Type of Change

• ✨ New Feature (UI redesign & layout enhancement)
• 🐞 Bug Fix
• 📝 Documentation
• 🔐 Security/Backend
• 📱 PWA/Offline

---

🧪 Testing & Validation

• I have tested the changes locally in Full-Stack Mode.
• I have verified the UI is responsive on mobile and desktop.
• (If applicable) I have tested the offline functionality.
• I have run npm start and confirmed there are no console errors.

---

🚩 Checklist:

• My code follows the existing folder structure.
• I have not committed any sensitive .env secrets.
• My PR targets the main branch.

---

📸 Visuals

• Before: Misaligned layout, tight spacing.

• After: Clean, centered, structured dashboard-style layout.

[vercel]

@Riya-Kharade is attempting to deploy a commit to the Renu's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Thanks for the PR, @Riya-Kharade!

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 Checklist

Before we review, please ensure:

• Your code follows the project's coding standards
• All file changes are accurate and intentional
• You've tested your changes locally
• Any review comments have been addressed

---

🙌 Thank You for Contributing!

We truly appreciate your interest in contributing to this project.

• Please make sure your code follows the project structure
• Add clear commit messages and comments where necessary
• Ensure your changes do not break existing functionality

We'll review your PR as soon as possible. Keep up the great work! ✨

---