Misalignment of Code Editor Highlight Box

[princerajpoot20]

Problem

The highlight box for the code editor mode in the EditorSwitch component is not centered and spills out of the boundary.

Viewing the Issue

See it here: Link

Expectation

It should be perfectly aligned.

[princerajpoot20]

/gfi ts

[KhudaDad414]

@princerajpoot20 In which environment is it not centred? I tried it on Chrome, Firefox and Sarafi. it is centred for me. 🤔

[princerajpoot20]

@KhudaDad414 In Chrome on my system, it is not centered. In Safari, it is centered correctly, but the inner symbol are not visible. In Brave, it is displayed perfectly.

Chrome:

Safari:

Brave:

[adityagarg06]

For chrome, it is perfectly aligned:

I think the issue has been resolved.

[nikhil-3112]

On Chrome and Opera browsers it is perfectly aligned. There is no issue with the alignment of the highlight box.
Issue Resolved.

[Amzani]

@princerajpoot20 you still see this issue ?

[princerajpoot20]

@Amzani Yes, the issue is still there.
Link used in the browser: https://deploy-preview-978--asyncapi-studio-design-system.netlify.app/?path=/story/components-editorswitch--c

Screen.Recording.2024-02-27.at.7.16.03.PM.mov

[KhudaDad414]

@princerajpoot20 since I can't reproduce it on my environment (tried with 3 browsers and it's centred.) can you open a PR with a fix?

[princerajpoot20]

@KhudaDad414 Sure.

[lmgyuan]

@princerajpoot20 could it be that your chrome version is not updated? (Just a thought) browsers make all kinds of mistakes.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️