[BUG] Hovering on boxes reduces their height, causing text misalignment

[rishyym0927]

Describe the bug.

When hovering over the boxes (e.g., "AsyncAPI 2.x" and "AsyncAPI 3.0"), the height of the boxes reduces, which causes misalignment in the surrounding text. This behavior looks visually unappealing and disrupts the layout

Expected behavior

Expected Behavior: Hovering over the boxes should not alter their height or cause any layout changes. The boxes and surrounding text should remain aligned.

Actual Behavior: The height of the boxes reduces upon hovering, leading to misaligned text and a disrupted layout.

Screenshots

Recording.2024-12-20.095204.mp4

How to Reproduce

1. I Hover over the boxes in the diagram or UI.
2. Observe how the height of the boxes reduces.
3. Notice the resulting misalignment in the text and layout.

🥦 Browser

Mozilla Firefox

👀 Have you checked for similar open issues?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.