[FEAT] : Added Adjustable Vertical Seperator between Editor and ContentViewer #173
Conversation
|
@JeelRajodiya Waiting for your feedbacks on this...🙂 |
|
@Yashwanth1906 I'm currently busy with my exams, I'll review it sometime after 3rd may |
|
@JeelRajodiya Okay.. |
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a resizable vertical separator between the ContentViewer and Editor panels to improve the user experience. Key changes include:
- Replacing the static dual-panel layout with a new ResizableContent component for dynamic resizing.
- Updating CSS modules (page.module.css, EditorNOutput.module.css, and ContentViewer.module.css) to support flexible panel sizing and visual feedback.
- Refactoring page.tsx to integrate the new ResizableContent component.
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| app/content/[...markdownPath]/page.tsx | Refactored to use ResizableContent for improved UI layout |
| app/content/[...markdownPath]/page.module.css | Updated layout styles for full viewport height and responsive sizing |
| app/components/ResizableContent.tsx | New component that implements resizable panels with stored width state |
| app/components/EditorNOutput/EditorNOutput.module.css | Adjusted styling to work with full width layout |
| app/components/ContentViewer/ContentViewer.module.css | Streamlined padding and ensured full width display |
Comments suppressed due to low confidence (1)
app/components/ResizableContent.tsx:35
- Consider attaching mousemove and mouseup event listeners to the document instead of the container element to ensure smoother behavior when the cursor leaves the container during dragging.
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent> | MouseEvent,) => {
| interface ResizableContentProps { | ||
| content: React.ReactNode; | ||
| codeFile: any; |
There was a problem hiding this comment.
Using 'any' for the codeFile prop may reduce type safety; specifying a more concrete type could help catch potential issues earlier.
| interface ResizableContentProps { | |
| content: React.ReactNode; | |
| codeFile: any; | |
| interface CodeFile { | |
| name: string; | |
| content: string; | |
| } | |
| interface ResizableContentProps { | |
| content: React.ReactNode; | |
| codeFile: CodeFile; |
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
@Yashwanth1906 Please implement this
| pathList.push({ | ||
| markdownPath: [item.folderName, step.fileName], | ||
| markdownPath: pathSegments, | ||
| }); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
are these changes relevant to the issue? Please remove these changes,
There was a problem hiding this comment.
I see, we are wrapping the EditorNOutput into this new component. however we are importing the styles from the different component file (i.e. page.module.css) .
move current file into a new folder of the same name, and add the css file in that folder to maintain consistent component declaration
There was a problem hiding this comment.
consider moving these changes to the page.tsx file (in the /content/[...markdownPath] folder) if you prefer to not to create a new component
There was a problem hiding this comment.
-
The divider and scroll bar have the same color and are difficult to differentiate. Moreover, when you click on the divider sometimes some text from the content is getting selected unintentionally. consider changing the styles of both dividers to make them differentiable (you can take reference from leetcode UI to implement into ours)
-
The whole page does not have the height of 100% and there are some space left at the very bottom
|
@Yashwanth1906 The vertical Separator is working as expected. could you please address my comments? |
I'll do it. |
What kind of change does this PR introduce?
Issue Number:
Screenshots/videos:
https://github.com/user-attachments/assets/9259dc52-cd5e-4a6e-8c6e-399232a21b4f
If relevant, did you update the documentation?
Summary
This PR introduces a resizable vertical separator between the content viewer and editor panels, improving the user experience by allowing users to adjust the width of each panel according to their preferences. The separator features:
The implementation uses CSS flexbox for layout management and includes proper cursor styling to indicate the resizable nature of the divider.
Does this PR introduce a breaking change?
No, this is a non-breaking change that enhances the existing UI without affecting any functionality or existing features.
Technical Details:
page.module.css