Fix profile page responsiveness issue on smaller screens (#216)

[Shrijan125]

Description

This PR fixes responsiveness issues on the profile page where the user details portion was getting clipped making components inaccessible for small devices.

The changes ensure proper text truncation and responsiveness.

Related Issue

Closes #216

Changes Made

• Fixed header text truncation inside flex container
• Prevented overflow on smaller screens
• Improved responsive behavior using Tailwind utilities

Loom Demo Video

https://www.loom.com/share/b375bc31bf924b43b748f35df5b78ffd

Summary by CodeRabbit

• Style
  • Refined profile page responsive layout for improved viewing on different screen sizes
  • Adjusted sidebar width to scale better from medium to extra-large displays
  • Added automatic scrolling for profile sidebar content on medium screens and above
  • Optimized content grid layouts to display in two-column format on extra-large screens for better space utilization

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates responsive breakpoints and scrolling behavior in the profile page layout. Sidebar width adjusts to display at half-width on medium screens and quarter-width on extra-large screens. Adds vertical scrolling constraints to sidebar, centers display name editing, and shifts grid layouts to activate two-column display only on extra-large screens for better tablet responsiveness.

Changes

Cohort / File(s)	Summary
Profile Layout Responsive Updates frontend/src/Pages/Profile.tsx	Modified sidebar container width breakpoints (md:w-1/2 xl:w-1/4), added overflow scrolling and max-height constraints (md:overflow-y-auto md:max-h-[calc(100vh-4rem)]), centered display name edit area (w-full justify-center), and shifted grid column breakpoints from sm:grid-cols-2 to xl:grid-cols-2 for Elo history, Top 5 Debaters, and Recent Debates sections.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A responsive tale, told with care,
Sidebar narrows, content laid fair,
On tablets and phones, the layout does flow,
No overflow, no cramped display woe!
Breakpoints adjusted, our profile shines bright, ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing profile page responsiveness on smaller screens, which directly matches the primary objective of the PR.
Linked Issues check	✅ Passed	The changes implement responsive Tailwind CSS utilities to fix profile layout issues on smaller screens, addressing the core requirement from issue #216 to make the page responsive across mobile, tablet, and desktop viewports.
Out of Scope Changes check	✅ Passed	All changes in Profile.tsx are scoped to responsive layout adjustments using Tailwind CSS breakpoints, directly addressing the responsiveness issue reported in #216 without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cb07eaf and 556e85a.

📒 Files selected for processing (1)

• frontend/src/Pages/Profile.tsx

🔇 Additional comments (4)

frontend/src/Pages/Profile.tsx (4)

759-759: LGTM - Sidebar responsiveness improvements.

The width adjustment (md:w-1/2 xl:w-1/4) appropriately gives the sidebar more horizontal space on medium screens to prevent clipping, while the md:overflow-y-auto md:max-h-[calc(100vh-4rem)] ensures vertical overflow is handled gracefully. The 4rem offset correctly accounts for the header height used elsewhere in this file.

---

830-847: LGTM - Display name alignment fix.

Adding w-full justify-center ensures the display name and edit button remain properly centered regardless of the sidebar's responsive width changes.

---

952-952: LGTM - Grid breakpoint adjustment for better tablet experience.

Pushing the two-column grid layout from sm (640px) to xl (1280px) ensures the chart cards have adequate horizontal space, especially since the sidebar now occupies more width on medium screens. This prevents cramped content on tablets.

---

1172-1172: LGTM - Consistent grid breakpoint adjustment.

This change mirrors line 952, maintaining consistent responsive behavior across both grid sections (charts and debates/leaderboard).

---

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.}