Fix/calendar layout misalignment

[altaskur]

Description

Goal

Fix visual alignment issues in the Calendar view where header cells and body cells would sometimes drift apart or have inconsistent heights. The aim was to ensure a rigid grid structure regardless of content length or window size.

Key Changes

• Refactored open-calendar.html: Replaced the custom CSS Grid implementation with PrimeNG's p-table component, utilizing table-layout: fixed.
• Updated open-calendar.ts: Introduced a weeks computed property to group calendarDays into weeks tailored for the table's row-based structure.
• Updated open-calendar.scss: Removed flex/grid container styles and implemented table-specific styles to enforce fixed cell dimensions and text truncation/scrolling.
• Updated open-calendar.spec.ts: Added unit tests for the new weeks computation and fixed a test case that lacked expectations.

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📝 Documentation update
• 🎨 Style/UI changes
• ♻️ Refactoring (no functional changes)
• ⚡ Performance improvement
• ✅ Test updates
• 🔧 Build/configuration changes

Impact Assessment

Database Impact

• No database changes
• New migration(s) included
• Existing data migration required

Backup Impact

• No impact on backups
• Backup format changed
• Restore compatibility maintained

Testing

How Has This Been Tested?

• Unit tests (open-calendar.spec.ts)
• Tested with SonarQube analysis (npm run sonar:check)

Test Steps

1. Navigate to the Calendar view.
2. Verify that:
   • Weekday headers align perfectly with day columns.
   • Week summary column aligns correctly at the end of each row.
   • Rows maintain a consistent height.
   • Long task names are truncated or wrap predictably within the fixed cell constraints.
3. Verify navigation between months works seamlessly.
4. Interact with calendar cells (click day, add time, click task) to ensure events still fire correctly.

Test Configuration

• Platform tested: Windows
• Browser: Chrome Headless

Checklist

• My code follows the project's coding standards
• I have performed a self-review of my code
• My changes generate no new warnings or errors
• New and existing unit tests pass locally with my changes
• I have run npm test and all tests pass
• I have run npm run sonar:check and the analysis passes

Breaking Changes

• This PR contains breaking changes

Related Issues

Closes # (Calendar layout misalignment)

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud