In the calendar's yearly view, the weeks are misaligned, and dates are displayed in incorrect positions. Additionally, when resizing the screen (responsive behavior), the positioning of weeks and dates changes unexpectedly.
Steps to Reproduce
Go to the calendar component in the yearly view.
Observe the misalignment of weeks and dates.
Resize the browser window or use a responsive screen (e.g., mobile or tablet).
Notice the change in the positions of the weeks and dates.
Expected Behavior
The weeks and dates should remain correctly aligned, regardless of the screen size.
Actual Behavior
The weeks are floating incorrectly, and the dates are displayed in the wrong positions.
On resizing, the issue becomes more noticeable, with inconsistent positioning.
Description
In the calendar's yearly view, the weeks are misaligned, and dates are displayed in incorrect positions. Additionally, when resizing the screen (responsive behavior), the positioning of weeks and dates changes unexpectedly.
Steps to Reproduce
Go to the calendar component in the yearly view. Observe the misalignment of weeks and dates. Resize the browser window or use a responsive screen (e.g., mobile or tablet). Notice the change in the positions of the weeks and dates.
Expected Behavior
The weeks and dates should remain correctly aligned, regardless of the screen size.
Actual Behavior
The weeks are floating incorrectly, and the dates are displayed in the wrong positions. On resizing, the issue becomes more noticeable, with inconsistent positioning.
Screenshots/Video
https://github.com/user-attachments/assets/968e0e37-9f7b-440a-afa0-8e7eb89fed21
Environment
Browser: Chrome, Firefox, Safari Device: Desktop OS: Windows, macOS
Webapp Configuration
React Version: "^18.3.1" Mantine: "^7.1.3"
System Configuration
Laptop/PC Brand & Model: Acer Aspire 7 Operating System: Windows 11 Processor: Intel Core i5 12th Gen 12450H RAM: 32 GB GPU: 4 GB NVIDIA GeForce RTX 3050 Screen Resolution: 1920x1080 Browser Version: Chrome Version 131.0.6778.86