Skip to content

[Bug] Fix scroll and content overflow in Create Hunt editor and preview #274

@kidiatoliny

Description

@kidiatoliny

Description

In the Create Hunt component, scrolling does not work properly inside both the editor and the preview sections.
When typing long content, the text area and markdown preview overflow beyond their container, making part of the content invisible.

This behavior prevents users from viewing or editing longer hunts comfortably.


Expected Behavior

  • The editor and preview areas should:
    • Have independent vertical scrolling when content exceeds container height.
    • Keep layout alignment intact without overflow.
    • Maintain smooth scroll behavior, both on desktop and mobile.
  • No content should appear outside the visible container area.

Frontend Tasks

  • Add proper scroll handling for both:
    • Editor container (overflow-y: auto).
    • Preview container.
  • Ensure parent containers have fixed max heights or flexible layouts using:
    • max-height or flex-grow within a defined parent.
  • Test behavior on:
    • Desktop browsers (Chrome, Safari, Firefox).
    • Mobile browsers (Safari iOS, Android Chrome).
  • Ensure scroll performance remains smooth with syntax highlighting enabled.

Optional Enhancements

  • Add subtle scroll shadows (mask-image or gradient fade) to indicate overflow.
  • Remember scroll position when switching between Edit and Preview tabs.
  • Adjust padding and borders for consistent visual alignment.

Notes

This bug directly affects the usability of Hunt creation, especially for longer posts or markdown snippets,
and must be fixed to maintain a smooth content creation experience.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions