Skip to content

feat(arena): complete UI overhaul with Code-style split pane layout - #132

Merged
barunaniket merged 1 commit into
mainfrom
arena-rework
Aug 20, 2026
Merged

feat(arena): complete UI overhaul with Code-style split pane layout#132
barunaniket merged 1 commit into
mainfrom
arena-rework

Conversation

@hagemaruwu

Copy link
Copy Markdown
Collaborator

Summary

A complete UI/UX overhaul of the CP Arena workspace (ArenaWorkspace), migrating from standard DOM scrolling to a constrained, LeetCode-style absolute split-pane layout. It fixes major UX issues (independent panel scrolling, UI camouflaging, and watermark tiling) and perfectly synchronizes the design language across the workspace and consent flow.

Type of change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that changes existing behaviour)
  • New / updated problem (challenge JSON)
  • Documentation only
  • Chore / refactor / tooling

Related issues

Closes #

How was this tested?

  • Verified the 20-80% boundary clamping on the resizable split panes.
  • Verified that the custom input and console trigger their own independent scrollbars when content overflows.
  • Toggled between Light and Dark mode to ensure the new Bronze mecha-btn tabs inverse correctly and do not camouflage into the background.
  • Stretched the Problem pane to 80% on an ultra-wide viewport to verify the dynamic watermark scales and tiles without leaving empty space.
  • Ran npx tsc --noEmit and npm run lint on the codebase to ensure 0 errors.

Checklist

  • I ran the checks locally on Node 22 and they pass: npx tsc --noEmit, npm run lint, npm run test, npm run build
  • I did not commit unrelated package-lock.json changes (see CONTRIBUTING.md - the native-binding gotcha)
  • My change is focused and single-purpose
  • I added / updated tests where it made sense
  • I updated documentation where needed
  • For UI changes: it looks correct in both light and dark mode
  • For problems: npm run challenges:validate passes and hidden tests are strong
  • I did not commit any secrets

Notes for reviewers

  • The ticks and external label chip have been completely removed from the Problem-side MechaPanel so that its header is perfectly symmetrical and flush with the Code Editor panel.
  • The ArenaRules component on the Consent page now renders cleanly without double-border styling issues.
  • The mecha-tabs active state was upgraded to a vibrant, glowing Bronze block to ensure maximum visibility in light mode.

- Migrated ArenaWorkspace to a strict 20-80 clamped split-pane layout
- Polished MechaPanel headers with perfect symmetry between problem and editor boxes
- Removed redundant visual clutter (colored dots, L-ticks) and matched header depths
- Styled tabs into vibrant solid bronze mecha buttons for high contrast in light/dark mode
- Fixed Custom Input/Console independent scrolling mechanics
- Scaled dynamic watermark to properly cover stretched ultra-wide panes
- Fixed broken archive links on the CP Arena index page
- Resolved unescaped entity linter errors in the consent flow
@vercel

vercel Bot commented Aug 19, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
code-chef-pesuecc-chapter Ready Ready Preview Aug 19, 2026 12:07am

@hagemaruwu

Copy link
Copy Markdown
Collaborator Author

@barunaniket verify it by urself.

@barunaniket
barunaniket merged commit e1f5003 into main Aug 20, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants