Skip to content

Navbar Dropdown causing issue of ui breakdown #2999

Closed
@rahulrana701

Description

@rahulrana701

p5.js version

1.9.0

What is your operating system?

None

Web browser and version

chrome://121.0.6167.85

Actual Behavior

The language selection dialog box on the homepage's navigation bar covers the entire screen, causing a UI issue. While it may not affect all devices, it consistently occurs on mine and potentially for others with similar devices. This problem is observed on both Google Chrome and Mozilla Firefox. To mitigate this, a recommended best practice is to implement a scroll bar within the dialog box, allowing users to navigate language options without disrupting the UI. Recorded instances of the issue on Mozilla Firefox and Google Chrome browsers are available for reference.

p5.js.Web.Editor.Mozilla.Firefox.2024-02-07.17-35-20.mp4

this is done on google chrome

p5.js.Web.Editor.-.Google.Chrome.2024-02-07.17-39-05.mp4

the same issue was encountered on the official website using Google Chrome.

p5.js.Web.Editor.-.Google.Chrome.2024-02-07.17-41-02.mp4

Expected Behavior

It should have a scroll bar to avoid these types of issues on any device.
@lindapaiste, I would like to work on this issue

Steps to reproduce

Steps:

  1. Go to p5.js editor home page click on language dialog box.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Area:CSSFor styling or layout issues handled with CSS/SASSBugError or unexpected behaviors

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions