Sticky Header Or No Sticky Header ID-640

[corypride]

Removed overflow-y-auto overflow-x-hidden from the authenticated layout's content area (which was silently breaking position: sticky), then added sticky headers to the Class Detail and Schedule pages.

• Class Detail page (pages/class-detail/index.tsx) — white header bar (breadcrumbs + class title + action buttons) is now sticky top-0 z-30, pinning at 64px (below TopNav) on scroll
• Schedule page (pages/Schedule.tsx) — page header row (title + filter + New Event button) is now sticky top-0 z-30 with a full-width background strip (-mx-8 px-8) that prevents edge bleed on scroll
• Critical layout fix (layouts/AuthenticatedLayout.tsx) — removed overflow-y-auto overflow-x-hidden from contentClass; these properties were creating an intermediate scroll context that silently intercepted position: sticky before it could reach the real scroll container. Without this fix, both sticky headers appeared to work but scrolled away with the page content.
• Schedule secondary fix (pages/Schedule.tsx) — removed overflow-x-hidden from the root div; per CSS spec, overflow-x: hidden forces overflow-y: auto, adding a second intercepting scroll context that broke sticky on the Schedule page specifically.
• Canonical class fixes in all touched files — suggestCanonicalClasses warnings resolved for files edited in this PR (see details below)

While making the sticky header changes, ESLint's suggestCanonicalClasses rule flagged arbitrary-value Tailwind classes (e.g. w-[140px], z-[100]) in the files I was already editing. These warnings are a byproduct of the project's migration to Tailwind v4 — v4 introduced first-class canonical equivalents for many previously arbitrary values, and the lint rule now requires them. Because the rule applies to any file touched in a PR, each file I edited had to have its violations resolved before the lint check would pass. This has been the case on at least the last 4 PRs that I have submitted, and the workflow has been that I resolved the warnings in those files only — the fixes are purely syntactic with no visual impact. The fact remains that the rest of the codebase still has similar warnings site-wide, so a dedicated follow-up PR will sweep those separately.

Canonical class fixes (files touched by this PR)

File	Before	After
class-detail/index.tsx	z-[100]	z-100
class-detail/RosterTab.tsx	w-[140px], z-[100]	w-35, z-100
class-detail/SessionRow.tsx	flex-shrink-0 (×6)	shrink-0 (×6)
Schedule.tsx	h-[600px], max-w-[1400px]	h-150, max-w-350
styles/globals.css	w-[220px], flex-shrink-0 (×2)	w-55, shrink-0 (×2)

All replacements are purely syntactic — compiled CSS output is identical. No visual changes.

---

Files changed

```
frontend/src/layouts/AuthenticatedLayout.tsx bug fix: remove overflow from contentClass
frontend/src/pages/Schedule.tsx sticky header + overflow fix + canonical classes
frontend/src/pages/class-detail/index.tsx sticky header + canonical class
frontend/src/pages/class-detail/RosterTab.tsx canonical classes only
frontend/src/pages/class-detail/SessionRow.tsx canonical classes only
frontend/src/styles/globals.css canonical classes only
```

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR applies a systematic Tailwind v4 cleanup across the frontend codebase, replacing arbitrary value classes (e.g., z-[100], w-[140px]) with canonical Tailwind class names (e.g., z-100, w-35). The refactoring includes documentation of conversion rules and implementation across multiple layout and page components.

Changes

Tailwind v4 Arbitrary-to-Canonical Class Cleanup

Layer / File(s)	Summary
Cleanup planning and reference documentation fix_next.md	Comprehensive reference document specifying the canonicalization conversion rules, exhaustive codebase scan results with file-by-file mappings for z-index, width, height, min-width, max-width, max-height, and rounded properties, explicit out-of-scope patterns that must not be changed, and build and grep verification steps.
Applied class replacements and layout adjustments frontend/src/layouts/AuthenticatedLayout.tsx, frontend/src/pages/Schedule.tsx, frontend/src/pages/class-detail/RosterTab.tsx, frontend/src/pages/class-detail/SessionRow.tsx, frontend/src/pages/class-detail/index.tsx, frontend/src/styles/globals.css	Z-index, width, and flex-shrink utilities are replaced across components (z-[100] → z-100, w-[140px] → w-35, flex-shrink-0 → shrink-0). Layout adjustments include sticky positioning with z-index layering on page headers, modified overflow handling, adjusted container width constraints, and global utility class updates.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Sticky Header Or No Sticky Header ID-640' directly references the core objective of adding sticky headers to the Class Detail and Schedule pages, which is the primary behavior change in this PR.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The PR description clearly relates to the changeset, detailing sticky header implementations, overflow fixes, and Tailwind class canonicalization across all modified files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@fix_next.md`:
- Line 137: The note about ID-640 is confusing because it claims
`class-detail/index.tsx` `z-[100]` and `Schedule.tsx` sizing were "already
fixed" in branch cpride/class-detail-a11y, yet the current diff shows those
exact changes (`class-detail/index.tsx` z-100 and `Schedule.tsx` h-150 and
max-w-350) being applied in this PR; update the note to either remove the
statement or reword it to explicitly state that these changes to
`class-detail/index.tsx` (z-100) and `Schedule.tsx` (h-150, max-w-350) are
included and being applied in this PR (ID-640) as part of the sticky header work
rather than being pre-existing in the other branch.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 59437420-8fb7-4aeb-b47f-68e11e122e52

📥 Commits

Reviewing files that changed from the base of the PR and between aa02010 and 0158543.

📒 Files selected for processing (7)

• fix_next.md
• frontend/src/layouts/AuthenticatedLayout.tsx
• frontend/src/pages/Schedule.tsx
• frontend/src/pages/class-detail/RosterTab.tsx
• frontend/src/pages/class-detail/SessionRow.tsx
• frontend/src/pages/class-detail/index.tsx
• frontend/src/styles/globals.css

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Clarify the note about ID-640 changes.

This note states that class-detail/index.tsx z-[100] and Schedule.tsx sizing were "already fixed" in the cpride/class-detail-a11y branch, but those exact changes appear in the current diff (class-detail/index.tsx line 173: z-100, Schedule.tsx lines 350, 367: h-150, max-w-350). Since this PR is also ID-640, the note creates confusion about whether these changes are in scope.

Consider either removing this note or rewording it to clarify that these specific files are being updated in this PR as part of the sticky header work.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@fix_next.md` at line 137, The note about ID-640 is confusing because it
claims `class-detail/index.tsx` `z-[100]` and `Schedule.tsx` sizing were
"already fixed" in branch cpride/class-detail-a11y, yet the current diff shows
those exact changes (`class-detail/index.tsx` z-100 and `Schedule.tsx` h-150 and
max-w-350) being applied in this PR; update the note to either remove the
statement or reword it to explicitly state that these changes to
`class-detail/index.tsx` (z-100) and `Schedule.tsx` (h-150, max-w-350) are
included and being applied in this PR (ID-640) as part of the sticky header work
rather than being pre-existing in the other branch.

[corypride]

This is because the a11y branch has not been merged. So same changes are being applied multiple times thus the need for this to be fixed app wide. I am creating a PR to clean it up in one sweep. That PR will follow this PR.