ui: fix duplicate problem config monaco editor scroll bars

[035966-L3]

Summary by CodeRabbit

• Bug Fixes
  • Improved editor sizing and layout display to ensure proper vertical alignment.
  • Adjusted scroll behavior in the problem configuration panel for enhanced UI consistency.

[coderabbitai]

Walkthrough

Two CSS styling adjustments were made to Monaco editor-related components. In the editor component, temporary element creation now sets both width and height to 100% instead of only width. In the problem config component, the editor container's overflow property changed from auto to hidden, modifying scroll behavior. No logic changes or public declarations were modified.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Both changes are straightforward CSS/dimension modifications with no logic alterations
• Homogeneous nature of changes (consistent styling adjustments across components)
• Minimal file scope (2 files affected)
• No structural changes or public API modifications

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses the main changes: fixing duplicate scrollbars in the Monaco editor within the problem config component by adjusting styling and dimensions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7f7bff9 and d148348.

📒 Files selected for processing (2)

• packages/ui-default/components/editor/index.tsx (1 hunks)
• packages/ui-default/components/problemconfig/index.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Analyze (javascript)
• GitHub Check: build

🔇 Additional comments (2)

packages/ui-default/components/problemconfig/index.tsx (1)

53-55: LGTM! Fixes duplicate scrollbars by delegating scroll control to Monaco editor.

Changing overflow from 'auto' to 'hidden' is appropriate here since the Monaco editor manages its own scrolling internally (as seen in the editor component). This prevents duplicate scrollbars while ensuring the editor properly fills the Allotment pane.

packages/ui-default/components/editor/index.tsx (1)

54-56: LGTM! Ensures proper vertical fill of editor container.

Adding height('100%') complements the width setting and works well with the problem config container's overflow: hidden change. This ensures the Monaco editor properly fills its parent container in the Allotment layout, eliminating the need for the parent to handle scrolling.

Note: The conditional height override on line 55 appropriately handles the non-autoResize case.

---

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

[pandadtdyy]

Unwelcome AI Pull Request.

[035966-L3]

I didn't: I'm not giving 2 PRs in 10 mins, #1092 is just moved from #1086.

[CuteMurasame]

@035966-L3 You should reopen your PR.

[035966-L3]

@035966-L3 You should reopen your PR.

@CuteMurasame No, I merged this elsewhere.