Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactive Example Search Box looks broken / not intended #1258

Closed
3 tasks done
glmvc opened this issue Apr 24, 2023 · 3 comments · Fixed by #1334
Closed
3 tasks done

Interactive Example Search Box looks broken / not intended #1258

glmvc opened this issue Apr 24, 2023 · 3 comments · Fixed by #1334
Labels
needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened.

Comments

@glmvc
Copy link

glmvc commented Apr 24, 2023

Summary

While I was focusing a line of code in a live example, I wanted to search something on the page (browser default shortcut [cmd] + f) and then suddenly such a box popped up (see screenshot below).
I don't know if this is intentional or maybe for a11y reasons, but it definitely looks broken.

I haven't thought of a solution or anything else, I first wanted to ask about this and what the status is. Could not find anything on this in the repo on the fly.

URL

All embedded live examples - for example:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

Reproduction steps

  1. Focus a code example, so enter "editing mode"
  2. Press shortcut for browser search
  3. Search box opens

Expected behavior

As I said above, I don't know the status of the search box and whether it should appear at all.
In any case, it does not look right, and I personally felt that this is something unintentional.

Actual behavior

The buttons and inputs (checkboxes) are overflowing.
It also don't look like they are styled in a way it would fit the docs.

Additionally, it was a bit unexpected and I wondered why my browser search wasn't working because I had scrolled down and didn't see what was happening....

Device

Laptop

Browser

Chrome

Browser version

Stable

Operating system

Mac OS

Screenshot

search-box

Anything else?

No response

Validations

@github-actions github-actions bot added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Apr 24, 2023
@wbamberg wbamberg transferred this issue from mdn/yari Apr 24, 2023
@wbamberg
Copy link
Collaborator

Guess this is a CodeMirror thing. @queengooborg , wdyt?

@queengooborg
Copy link
Collaborator

Yeah, looks like CodeMirror has its own search system, so when focused on the code editor, it'll listen for ⌘F and display its own search. A little annoying for our intents.

@glmvc
Copy link
Author

glmvc commented Jun 1, 2023

@wbamberg thanks for moving the issue to the right place.
What is the status here? @queengooborg (I don't want to be annoying, but I just stumbled across this issue again)
I'm willing to help as far as my knowledge goes (and permission for this repo?).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants