Bug: Calendar Yearly View - Incorrect Week and Date Positioning, Responsive Screen Issue

[Sudhanshu-Pavesoft]

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

Untitled.Video.December.2.2024.12_51.PM.mp4

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

[shivamtsystems]

Getting the same issue with responsiveness, please provide the steps to resolve this issue