Plan - Attendance Calendar Overlap & Layout Fix

This plan details the steps to resolve the layout issue where the sticky employee names column in the Monthly Attendance Calendar overlaps and scrolls underneath the expanded sidebar.

📋 Overview & Root Cause Analysis

The Bug

On the Monthly Attendance Calendar page:

The employee names column uses sticky left-0 z-10 to remain visible while scrolling horizontally.
Because the page does not constrain the content width, a wide table (displaying 30 days) forces the main page container to stretch beyond the viewport width.
This results in window-level horizontal scrollbars. Since the sidebar is fixed to the window and the table column sticks to the window, the sticky column scrolls underneath the sidebar.

Root Cause

In app-content.tsx, the wrapper div has no layout constraint classes. In a flex container (which SidebarInset is), child elements default to min-width: auto, allowing them to expand infinitely to fit their content width.

🎯 Success Criteria

The Attendance Calendar page does not overflow the browser window horizontally, eliminating window-level scrollbars.
The grid table container scrolls locally within its card.
The sticky employee column sticks to the left boundary of its container (immediately to the right of the sidebar) and does not hide underneath the sidebar.

🛠️ Proposed Solution

1. Update AppContent Layout Wrapper

Modify app-content.tsx to add w-full min-w-0 overflow-hidden to the intermediate div wrapping the child elements. This forces the browser to restrict the content area's width to the viewport and make children components scroll locally.

📋 Task Breakdown

Task 1: Update AppContent Wrapper Styles

Agent: frontend-specialist
Skill: frontend-design
File: app-content.tsx
Description: Add CSS classes w-full min-w-0 overflow-hidden to the wrapper div.

INPUT:

<div dir={position === 'right' ? 'rtl' : 'ltr'}>
    {children}
</div>

OUTPUT:

<div dir={position === 'right' ? 'rtl' : 'ltr'} className="w-full min-w-0 overflow-hidden">
    {children}
</div>

VERIFY: Open the calendar view in the browser and confirm that window-level horizontal scrolling is gone and the table scrolls locally inside the card.

✅ PHASE X: Verification Checklist

Socratic Gate was respected.
No purple/violet hex codes introduced in code.
Table scrolls locally without window overflow.
Employee names remain fully visible next to the sidebar.
Compile check passes (e.g. npm run build or similar validation if applicable).

3.0 KiB Raw Blame History