[Improvement-17248][UI] Optimize file details display area to reduce blank space#17731
[Improvement-17248][UI] Optimize file details display area to reduce blank space#17731ruanwenjun merged 13 commits intoapache:devfrom
Conversation
…blank space - Add height prop to MonacoEditor component with default value '300px' - Use dynamic height calculation for file edit page: calc(100vh - 320px) - Use dynamic height calculation for file create page: calc(100vh - 420px) - Ensures MonacoEditor fills the available screen space - Improves user viewing experience by reducing large blank space This resolves the issue where the file details display area had excessive blank space at the bottom. Closes apache#17248
There was a problem hiding this comment.
Pull request overview
This PR optimizes the file details display area in the resource center by making the MonacoEditor component fill available screen space dynamically. The component now accepts a configurable height prop while maintaining backward compatibility with a default value, and applies viewport-based height calculations to edit and create pages.
- Added a
heightprop to MonacoEditor component with a '300px' default for backward compatibility - Applied dynamic viewport-based heights to file edit (
calc(100vh - 320px)) and create (calc(100vh - 420px)) pages - Improved space utilization by eliminating excessive blank space below the editor
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| dolphinscheduler-ui/src/components/monaco-editor/index.tsx | Added configurable height prop with '300px' default value |
| dolphinscheduler-ui/src/views/resource/components/resource/edit/index.tsx | Applied dynamic height calculation for edit page |
| dolphinscheduler-ui/src/views/resource/components/resource/create/index.tsx | Applied dynamic height calculation for create page |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
dolphinscheduler-ui/src/views/resource/components/resource/edit/index.tsx
Outdated
Show resolved
Hide resolved
dolphinscheduler-ui/src/views/resource/components/resource/create/index.tsx
Outdated
Show resolved
Hide resolved
- Extract hard-coded magic numbers (320px, 420px) to named constants - Add minHeight constraint (200px) to MonacoEditor for better UX on small screens - Document offset values with detailed comments explaining what UI elements contribute to each offset Fixes apache#17248
- Replace hardcoded pixel offsets (calc(100vh - 320px)) with Flexbox layout - Add .file-edit-content container with flex column layout - Add .editor-wrapper with flex: 1 to auto-fill remaining space - Add .button-area with flex-shrink: 0 to keep buttons always visible - Remove constants.ts as fixed pixel offsets are no longer needed - Add minHeight: 200px to ensure editor has minimum usable height This approach is more robust than fixed pixel calculations: - Automatically adapts to different screen sizes - Buttons are always visible without scrolling - No need to manually calculate header/footer heights Fixes apache#17248
|
Sorry, I need to make a further fix. |
It's ok. You can take your time. |
- Add overflow: hidden to .file-edit-content container - Add overflow: hidden to .form-content - Add overflow: hidden and max-height to .editor-wrapper - This ensures the editor stays within bounds and buttons remain visible
|
I have re-fixed the code. Could you please take some time to review it when you're available? Thank you! |
The slid issue still exists. You can use the mouse wheel or the keyboard to slide up and down. Part of the lowered button is blocked by sliding. |
…e buttons are always visible - Use calc(100vh - Npx) to dynamically calculate editor height based on viewport - Remove complex flexbox layout that caused infinite scrolling issues - Reduce Monaco Editor minHeight from 200px to 150px for better small screen support - Ensure Save and Return buttons remain visible without scrolling on normal screen sizes
|
What is the purpose of the pull request
Fix #17248
This PR optimizes the file details display area in the Resource Center to reduce blank space and ensure buttons are always visible.
Brief change log
calc(100vh - Npx)) for Monaco Editor to dynamically adapt to different screen sizesminHeightfrom 200px to 150px for better small screen supportVerify this pull request
This pull request was tested manually by:
/resource/file/create)Screenshots
Related Issues
Closes #17248