Feature Description
Currently, the editing controls (such as brightness, contrast, and trim sliders) are positioned in a way that can obstruct or distract from the video preview during adjustments. This makes it harder for users to clearly observe real-time changes on the video canvas while editing.
Problem This Solves
This enhancement proposes restructuring the editor layout so that all adjustment panels, sliders, and trim tools are moved to a dedicated right-hand sidebar. By placing controls beside the video preview instead of overlapping or crowding it, users can naturally shift focus between the canvas and settings without visual interruption.
This layout pattern follows the design approach used in modern professional video editing applications, improving usability and editing precision.
Proposed Solution
Refactor the editor layout components — particularly around VideoEditor.tsx — to use a responsive CSS Grid or Flexbox structure that:
- Keeps the video preview centered and unobstructed
- Moves editing controls into a fixed/right sidebar on desktop screens
- Maintains responsive behavior for smaller viewports (stacked or collapsible layout on mobile/tablet if needed)
Possible implementation areas:
VideoEditor.tsx- Layout wrapper components
- Sidebar/control panel containers
- Responsive CSS modules or Tailwind utility classes
Alternatives Considered
- Keeping controls on the left sidebar
- Placing sliders beneath the video preview
However, both approaches reduce editing efficiency and make real-time visual feedback less intuitive compared to a right-side control panel.
Additional Context
I would love to work on this issue as a contributor for GSsoc’26. Please consider assigning this issue to me if the maintainers approve this UI/UX enhancement proposal.
Feature Description
Currently, the editing controls (such as brightness, contrast, and trim sliders) are positioned in a way that can obstruct or distract from the video preview during adjustments. This makes it harder for users to clearly observe real-time changes on the video canvas while editing.
Problem This Solves
This enhancement proposes restructuring the editor layout so that all adjustment panels, sliders, and trim tools are moved to a dedicated right-hand sidebar. By placing controls beside the video preview instead of overlapping or crowding it, users can naturally shift focus between the canvas and settings without visual interruption.
This layout pattern follows the design approach used in modern professional video editing applications, improving usability and editing precision.
Proposed Solution
Refactor the editor layout components — particularly around
VideoEditor.tsx— to use a responsive CSS Grid or Flexbox structure that:Possible implementation areas:
VideoEditor.tsxAlternatives Considered
However, both approaches reduce editing efficiency and make real-time visual feedback less intuitive compared to a right-side control panel.
Additional Context
I would love to work on this issue as a contributor for GSsoc’26. Please consider assigning this issue to me if the maintainers approve this UI/UX enhancement proposal.