feat: Implement UI/UX revamp for code editor with independent scrolling (#118)

[Pratyush2240]

🎨 UI/UX Revamp: Modernize Code Editor Experience

Fixes #118

📋 Summary

This PR implements a complete UI/UX overhaul of the problem-solving page and code editor interface, bringing it up to modern IDE standards with independent scrolling panes and a sticky editor layout.

✨ Key Features

1. Two-Pane Layout with Independent Scrolling

• ✅ Left pane (problem description) has its own scrollbar
• ✅ Right pane (code editor) has independent scrolling
• ✅ Scrolling one pane does not affect the other
• ✅ Smooth scroll behavior for better UX

2. Sticky Right Pane

• ✅ Code editor and output tabs remain fixed in viewport
• ✅ Users can scroll through long problem descriptions while keeping the editor visible
• ✅ Implemented using position: sticky for optimal performance

3. Modern IDE Aesthetics

• ✅ Improved typography with better letter spacing and font rendering
• ✅ Enhanced scrollbar styling with rounded corners and smooth hover effects
• ✅ Modernized button designs with consistent spacing and transitions
• ✅ Better visual hierarchy with refined color palette
• ✅ Anti-aliased font rendering for crisp text display

4. Responsive Design

• ✅ Sticky positioning disabled on mobile/tablet for better UX
• ✅ Proper height adjustments for smaller screens
• ✅ Maintains functionality across all device sizes

🔧 Technical Changes

Files Modified:

• src/styles/CodeEditor.module.css

Key CSS Updates:

• Added height: 100vh and overflow-y: auto to both panes
• Implemented position: sticky on right pane
• Enhanced scrollbar styling for consistent appearance
• Improved responsive breakpoints for mobile devices
• Cleaned up duplicate CSS rules

🧪 Testing

• ✅ Tested on desktop (1920x1080)
• ✅ Independent scrolling works as expected
• ✅ Right pane stays sticky while scrolling problem description
• ✅ Responsive behavior verified on mobile breakpoints
• ✅ No breaking changes to existing functionality

📸 Screenshots

Closes #118

[vercel]

@Pratyush2240 is attempting to deploy a commit to the aviralsaxena16's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Thanks for Your Contribution to CanonForces! ☺️

We'll review it as soon as possible. In the meantime, please:

• ✅ Double-check the file changes.
• ✅ Ensure that all commits are clean and meaningful.
• ✅ Link the PR to its related issue (e.g., Closes #123).
• ✅ Resolve any unaddressed review comments promptly.

💬 Need help or want faster feedback?
Join our Discord 👉 CanonForces Discord

Thanks again for contributing 🙌 – @Pratyush2240!
cc: @aviralsaxena16

[aviralsaxena16]

@Pratyush2240 Thanks for the quick contribution but can you share the mockup screenshot of IDE UI you have updated

[Pratyush2240]

Canonforce.Video.mp4

Here is a small demo video of UI changes.
hope this helps.

[aviralsaxena16]

@Pratyush2240 It's nice but I meant if you can completely change the looks of this section transforming to look like modern IDEs, also remove emojis and have a single button (submit/run) only

[aviralsaxena16]

@Pratyush2240 Thanks for the contribution 😇, The new UI looks great , however there are some ambiguities introduced for result calculation that will see, for now I am merging this PR , Thanks !